重新排序html表格行

我試圖將display:none屬性行推到表格的底部。但是，我的代碼只推動tr與display:none屬性。第二排停留在同一個位置，我無法將它推到桌子底部。重新排序html表格行

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

來源

2011-04-19 prakashkadakol

請保持代碼的代碼。 – 2011-04-19 06:11:21

部分是在這裏：

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); 
    } 
}

首先，如果塊沒有內部的聲明變量，JavaScript的只有功能範圍，從而更好地宣佈他們在函數的頂部，所以範圍是顯而易見的。我會留下來讓你解決。其次，在IE行中必須添加一個元素，其他瀏覽器用於將它們添加到tbody，如果你不這樣做，但最近Firefox還沒有這樣做，所以將它們添加到tBody中。

最後，你的問題是行是HTMLCollection，所以它是活的。當你移動第一行時，在索引1處，它下面的一行變爲第一行。因此，在索引2的下一次迭代中，它得到它下面的行（即原來索引爲3但現在爲2的那一行）移動到底部）。在最後一次迭代中，您將得到已經移動到底部的行。

簡單的解決方案是向後通過收集。哦，你不必拆除和更換的元素，你可以將它：

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

因爲行並[a] .parentNode是tbody。請注意，這是移動到TBODY的底部，所以如果你有多個TBODY元素，你需要去的最後一個引用，並添加它們有：

var lastTBody = table.tBodies[table.tBodies.length - 1];

來源

2011-04-19 06:40:23 RobG

您使用索引遍歷表，該索引在更改表時需要更新。

例如，當您將第二行移到底部時，第三行將變成第二行。由於指數無論如何都在上漲，下一次循環的迭代將看到新的第三條線，這是第四條線。之前的第三行（現在的第二行）因此被忽略。

您可以通過在將行移動到底部之後調整索引來解決此問題。

一旦你停止跳過線條，你將陷入無限循環。您還需要調整長度以不再移動已移動的線條。

例如：

您的問題

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

來源

2011-04-19 06:26:44 lyle

或添加所有刪除的行後迭代:) – Sam 2011-04-19 06:38:32

@Sam - 是的，這是一個選項，但它需要2個循環。另一種選擇是將行轉換爲數組（也需要額外的循環或函數調用）。我猜測OP必須選擇更可維護的東西。 – RobG 2011-04-19 06:50:05

你是正確的，但雖然前者由萊爾肯定是最短的，但我會選擇兩個循環，我不是一個改變正在迭代槽的迭代仍在進行中的對象的忠實粉絲 – Sam 2011-04-19 06:57:49

重新排序html表格行

回答

相關問題