Javascript 使用DOM遍历表的问题
我设法解决了使用DOM仅使用JavaScript遍历表行时遇到的一些问题,但遇到了两个障碍。我正在尝试创建一个表,其中每一行都有一组按钮来向上、向下或删除该行。我能够成功地使用.replaceChild方法,但它替换了行,而不是仅仅交换它们。当我尝试.moveRow时,我不断收到一个错误,说HTML表部分没有该方法。我在尝试将当前行与下面的行交换时遇到了相同的问题。有什么建议吗Javascript 使用DOM遍历表的问题,javascript,Javascript,我设法解决了使用DOM仅使用JavaScript遍历表行时遇到的一些问题,但遇到了两个障碍。我正在尝试创建一个表,其中每一行都有一组按钮来向上、向下或删除该行。我能够成功地使用.replaceChild方法,但它替换了行,而不是仅仅交换它们。当我尝试.moveRow时,我不断收到一个错误,说HTML表部分没有该方法。我在尝试将当前行与下面的行交换时遇到了相同的问题。有什么建议吗 function up(x){ // var tableBody = document.getEle
function up(x){
// var tableBody = document.getElementsByTagName("tbody")[0]; // tried it with tableBody and it still didn't work
var table = x.parentNode.parentNode.parentNode;
var tableRow = x.parentNode.parentNode.cloneNode(true);
var previousRow = x.parentNode.parentNode.previousSibling.cloneNode(true);
table.replaceChild(tableRow,x.parentNode.parentNode.previousSibling);
}
function down(x){
var table = x.parentNode.parentNode.parentNode;
var tableRow = x.parentNote.parentNode.cloneNode(true);
var belowRow = x.parentNode.parentNode.nextSibling.cloneNode(true);
table.moveRow(tableRow,x.parentNode.parentNode.nextSibling);
}
我的按钮:
<table id="table1" border="1">
<tbody>
<tr>
<th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th>
</tr>
<tr id="enterData">
<td id="buttons">
<input type="button" value="Up" onclick="up(this)" />
<input type="button" value="Down" onclick="down(this)" />
</td>
</tr>
</tbody>
</table>
第1列第2列第3列第4列
您可以使用insertBefore
上移或下移行,最后一行使用appendChild
,我还使用*ElementSibling来避免文本节点问题,但这可能会导致兼容性问题
function up(x){
var row = x.parentNode.parentNode;
var table = row.parentNode;
//Don't move up over the header
if (row.previousElementSibling && row.previousElementSibling.previousElementSibling){
table.insertBefore(row,row.previousElementSibling);
}
}
function down(x){
var row = x.parentNode.parentNode;
var table = row.parentNode;
//can't use insertBefore for last row.
if (row.nextElementSibling && row.nextElementSibling.nextElementSibling){
table.insertBefore(row,row.nextElementSibling.nextElementSibling);
}
else{
table.appendChild(row);
}
}
您可以使用
insertBefore
来上下移动行和appendChild
来移动最后一行,我还使用*ElementSibling来避免文本节点问题,但这可能会导致兼容性问题
function up(x){
var row = x.parentNode.parentNode;
var table = row.parentNode;
//Don't move up over the header
if (row.previousElementSibling && row.previousElementSibling.previousElementSibling){
table.insertBefore(row,row.previousElementSibling);
}
}
function down(x){
var row = x.parentNode.parentNode;
var table = row.parentNode;
//can't use insertBefore for last row.
if (row.nextElementSibling && row.nextElementSibling.nextElementSibling){
table.insertBefore(row,row.nextElementSibling.nextElementSibling);
}
else{
table.appendChild(row);
}
}
你试过了吗?为什么要克隆行,难道不想用这些函数来移动它们吗?让我们看看这个链接,moveRow似乎不是跨浏览器的。顺便说一句,尝试“擦干”代码,避免每次调用x.parentNode.parentNode。这对我来说会更清楚you@bfavaretto当前位置以前我没有尝试过插入,尽管现在我看到它,我认为它会解决我的问题。我之所以克隆这些行,是因为我想从该行复制值,但不确定如果不这样做它是否可以工作。所以你应该试试Musa的解决方案。你试过了吗?为什么要克隆行,难道不想用这些函数来移动它们吗?让我们看看这个链接,moveRow似乎不是跨浏览器的。顺便说一句,尝试“擦干”代码,避免每次调用x.parentNode.parentNode。这对我来说会更清楚you@bfavaretto当前位置以前我没有尝试过插入,尽管现在我看到它,我认为它会解决我的问题。我之所以克隆这些行,是因为我想从该行复制值,但不确定如果不这样做它是否可以工作。因此,您应该试试Musa的解决方案。非常感谢!.nextSiblingElement是一个拼写错误,并且应该是.nextElementSibling,还是另一种方法?非常感谢!.nextSiblingElement是一个打字错误,应该是.nextElementSibling,还是另一种方法?