js实现table行的以动
时间: 2023-11-27 14:02:30 浏览: 34
实现表格行的移动可以使用 JavaScript 中的 DOM 操作,具体步骤如下:
1. 首先,获取所有需要进行移动的按钮元素,可以使用 `document.querySelectorAll()` 方法并指定对应的 CSS 选择器。
2. 然后,为每个按钮元素绑定点击事件,当点击时执行对应的移动操作。
3. 在移动操作中,获取当前按钮所在的行元素,以及需要移动到的目标位置的行元素。
4. 利用 DOM 操作,将当前行元素插入到目标位置的前面或者后面,实现行的移动操作。
下面是一个示例代码,实现了将表格行向上或者向下移动的功能:
```
// 获取所有需要进行移动的按钮元素
const moveUpBtns = document.querySelectorAll('.move-up');
const moveDownBtns = document.querySelectorAll('.move-down');
// 绑定点击事件
moveUpBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 获取当前按钮所在的行
const row = btn.parentNode.parentNode;
// 获取当前行的前一个兄弟节点
const prevRow = row.previousElementSibling;
// 如果前一个兄弟节点存在,则交换两行的位置
if (prevRow) {
// 获取当前行的父元素
const parent = row.parentNode;
// 将当前行插入到前一个兄弟节点的前面
parent.insertBefore(row, prevRow);
}
});
});
moveDownBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 获取当前按钮所在的行
const row = btn.parentNode.parentNode;
// 获取当前行的后一个兄弟节点
const nextRow = row.nextElementSibling;
// 如果后一个兄弟节点存在,则交换两行的位置
if (nextRow) {
// 获取当前行的父元素
const parent = row.parentNode;
// 将当前行插入到后一个兄弟节点的后面
parent.insertBefore(nextRow, row);
}
});
});
```
在上述代码中,我们首先使用 `document.querySelectorAll()` 方法获取所有需要进行移动的按钮元素,然后使用 `forEach()` 方法为每个按钮元素绑定点击事件,当点击时执行对应的移动操作。在移动操作中,我们利用 DOM 操作,获取当前按钮所在的行元素,以及需要移动到的目标位置的行元素,然后将当前行元素插入到目标位置的前面或者后面,实现行的移动操作。