Question

我正在尝试将display:none属性行推送到表格的底部。但是，我的代码仅推送具有tr属性的第一个display:none。第二行保持在同一位置，我无法将其推到桌子底部。

<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>

Answer 1

你的部分问题在于：

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块中声明变量，javascript只有函数作用域，所以最好在函数顶部声明它们，因此范围很明显。我会留给你修理。

其次，IE中的行必须添加到 tbody 元素中，其他浏览器用于将它们添加到tbody中，如果不这样做，但最近Firefox没有这样做，所以将它们添加到一个人。

最后，您的问题是行是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];

Answer 2

使用索引循环遍历表，当您更改表时需要更新索引。

例如，当您将第二行移动到底部时，第三行将成为第二行。由于索引无论如何都会前进，循环的下一次迭代会查看新的第三行，这是之前的第四行。因此忽略前一个第三行（现在是第二行）。

您可以通过在将行移动到底部后调整索引来解决此问题。

一旦你停止跳过线路，你将陷入无限循环。您还需要调整长度，以便不再移动已经移动的线。

例如：

table.appendChild (row);
a--;
b--;

重新排序html表行

2 个答案: