我试图将 display:none 属性行推到表的底部。但是，我的代码仅推送具有 display:none 属性的第一个 tr。第二行保持在同一位置，我无法将其向下推到表格底部。
<html>
<head>
<script>
function moveHiddenRows()
{
var table = document.getElementById('res');
var rows = table.getElementsByTagName('tr');
for (var a=0, b=rows.length; a<b; a++)
{
if (rows[a].style.display == 'none')
{
var row = rows[a].parentNode.removeChild(rows[a]);
table.appendChild(row);
}
}
for(var i=0;i<rows.length;i++)
{
if(i%2==0)
rows[i].className="even";
else
rows[i].className="odd";
}
}
</script>
<style>
.odd{
background-color:red;
}
.even{
background-color:yellow;
}
</style>
</head>
<body onload="javascript:moveHiddenRows();">
<table id="res">
<tbody>
<tr><td>ABC</td></tr>
<tr><td>asd</td></tr>
<tr style="display:none;"><td>XYZ</td></tr>
<tr style="display:none;"><td>asd</td></tr>
<tr><td>asd</td></tr>
<tr><td>asd</td></tr>
</tbody>
</table>
</body>
</html>
最佳答案
你的部分问题在这里:
var table = document.getElementById('res');
var rows = table.getElementsByTagName('tr');
for (var a=0, b=rows.length; a<b; a++)
{
if (rows[a].style.display == 'none')
{
var row = rows[a].parentNode.removeChild(rows[a]);
table.appendChild(row);
}
}
首先，不要在 if block 中声明变量，javascript 只有函数作用域，所以最好在函数顶部声明它们，这样作用域就很明显了。我会留给您修复。
其次，在 IE 中行必须被添加到一个 tbody 元素，如果你不这样做，其他浏览器习惯将它们添加到 tbody，但最近 Firefox 还没有这样做，所以将它们添加到一个 tBody。
最后，您的问题是 rows 是 HTMLCollection ，所以它是活的。当您移动第一行时，在索引 1 处，它下面的行成为第 1 行。因此在索引 2 的下一次迭代中，它得到它下面的行(即最初是索引 3 但现在是 2 的行，因为你将 1 移动到底部)。在最后一次迭代中，您将获得已移至底部的行。
简单的解决方案是向后遍历集合。哦，你不必删除和替换元素，你可以移动它:
var a=rows.length;
while (a--)
{ if (rows[a].style.display == 'none')
{
rows[a].parentNode.appendChild(rows[a]);
}
}
但是请注意，行已按顺序交换。对于那个很抱歉!保持它们有序的另一种方法是将集合转换为数组(简单地遍历集合并将行添加到数组)，或者弄乱计数器:
for (var a=0, b=rows.length; a<b; a++)
{
if (rows[a].style.display == 'none')
{
rows[a].parentNode.appendChild(rows[a]);
a--; // Move a up because removed a row
b--; // Shorten b so don't visit row again at the bottom
}
}
因为 rows[a].parentNode 是 tbody。请注意，这会将它移动到 tbody 的底部，因此如果您有多个 tbody 元素，您需要获取对最后一个元素的引用并将它们添加到那里:
var lastTBody = table.tBodies[table.tBodies.length - 1];
关于javascript - 重新排序 html 表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5712272/