js怎么实现表格数据左移右移功能
时间: 2023-05-20 13:00:59 浏览: 141
可以使用 JavaScript 中的 DOM 操作来实现表格数据的左移右移功能。具体实现步骤如下:
1. 获取表格元素及其子元素,使用 document.getElementById() 或 document.querySelector() 方法获取表格元素,使用表格元素的 rows 属性获取所有行元素。
2. 定义左移右移函数,通过修改表格行元素的 innerHTML 属性来实现数据的左移右移。例如,左移函数可以将每一行的第一个单元格移动到该行的最后一个单元格,右移函数可以将每一行的最后一个单元格移动到该行的第一个单元格。
3. 绑定左移右移事件,使用 addEventListener() 方法为左移右移按钮绑定 click 事件,当用户点击按钮时触发相应的左移右移函数。
以下是一个简单的示例代码:
```html
<table id="myTable">
<tr>
<td>1</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>2</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
<button id="leftBtn">左移</button>
<button id="rightBtn">右移</button>
<script>
const table = document.getElementById('myTable');
const rows = table.rows;
function leftShift() {
for (let i = 0; i < rows.length; i++) {
const firstCell = rows[i].cells[0];
const lastCell = rows[i].cells[rows[i].cells.length - 1];
rows[i].insertBefore(firstCell, lastCell.nextSibling);
}
}
function rightShift() {
for (let i = 0; i < rows.length; i++) {
const firstCell = rows[i].cells[0];
const lastCell = rows[i].cells[rows[i].cells.length - 1];
rows[i].insertBefore(lastCell, firstCell);
}
}
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
leftBtn.addEventListener('click', leftShift);
rightBtn.addEventListener('click', rightShift);
</script>
```
阅读全文
相关推荐















