表格多行上移下移怎么写js
时间: 2024-02-04 08:04:21 浏览: 127
table上移下移 js
5星 · 资源好评率100%
要使表格多行上移下移,可以使用JavaScript来操作DOM元素。下面是一个简单的示例,它演示了如何使用JavaScript将表格中的多行向上或向下移动:
```html
<table id="myTable">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>
<button onclick="moveUp()">Up</button>
<button onclick="moveDown()">Down</button>
```
```javascript
function moveUp() {
var table = document.getElementById("myTable");
var row = table.rows[table.rows.length - 1];
table.deleteRow(table.rows.length - 1);
table.insertBefore(row, table.rows[0]);
}
function moveDown() {
var table = document.getElementById("myTable");
var row = table.rows[0];
table.deleteRow(0);
table.appendChild(row);
}
```
这个例子中,我们首先定义了一个包含三行两列的表格,然后定义了两个按钮,分别用于向上和向下移动表格的行。当点击“Up”按钮时,我们要获取表格中的最后一行,然后将其删除并插入到表格的第一行之前。当点击“Down”按钮时,我们要获取表格中的第一行,然后将其删除并附加到表格的末尾。
阅读全文