如何在JavaScript中刪除表格中的單元格並重新排序

根據問題，我怎樣才能刪除空單元格，並將數據放在JavaScript/Prototype的表格頂部，基本上所有包含數據的單元格都將位於頂部然後空的單元格應該被刪除。如何在JavaScript中刪除表格中的單元格並重新排序

<table> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2">Cell2</td> 
    </tr> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2"></td> 
     <td class="c3">Cell3</td> 
    </tr> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2">Cell2</td> 
     <td class="c3"></td> 
    </tr> 
</table> 


Cell1 Cell2     Cell1 Cell2 Cell3 
Cell1   Cell3  ---> Cell1 Cell2 
Cell1 Cell2     Cell1

感謝

來源

2011-07-15 mike sorenson

那麼，你到目前爲止嘗試過什麼？請告訴我們該代碼。 – sjngm

到底它是需要被編碼的算法的一點點。

我只是使用DOM功能，因爲我不熟悉jQuery或其他框架，但我認爲你可以找出算法的想法。轉換它不應該太難。

<html> 
<head> 
<script type="text/javascript"> 
function init() { 
    var table = document.getElementsByTagName("table")[0]; 
    var trs = table.getElementsByTagName("tr"); 
    var data = []; 
    var rows, columns; 

    // run through all TRs and TDs and collect the data into an array without 
    // empty slots 
    for (var r = 0; r < trs.length; r++) { 
    var tds = trs[r].getElementsByTagName("td"); 

    for (var d = 0; d < tds.length; d++) { 
     if (tds[d].innerHTML) { 
     data[d] = (data[d] || []).concat(tds[d].innerHTML); 
     } 
    } 
    } 

    // the tricky thing now is to convert the X/Y alignment of the 
    // elements in data into a Y/X one for the table 

    columns = data.length;  // target table will have this many columns 
    rows = data[0].length;  // target table will have this many rows 

    table = document.createElement("table"); 

    for (var r = 0; r < rows; r++) { 
    var tr = document.createElement("tr"); 

    for (var c = 0; c < columns; c++) { 
     var td = document.createElement("td"); 

     td.innerHTML = data[c][r] || ""; 
     tr.appendChild(td); 
    } 

    table.appendChild(tr); 
    } 
    document.body.appendChild(table); 
} 
</script> 
</head> 
<body onload="init()"> 
<table> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2">Cell2</td> 
    </tr> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2"></td> 
     <td class="c3">Cell3</td> 
    </tr> 
    <tr class="row"> 
     <td class="c1">Cell1</td> 
     <td class="c2">Cell2</td> 
     <td class="c3"></td> 
    </tr> 
</table> 
</body> 
</html>

輸出符合您的要求。

來源

2011-07-15 21:16:41 sjngm

window.onload = function() { 
    var tds = document.getElementsByTagName("td"); 
    for(var i=0; i<tds.length; i++) { 
     if(tds[i].innerHTML == "") { 
      tds[i].parentNode.removeChild(tds[i]); 
     } 
    } 
};

來源

2011-07-15 20:44:14 Jedediah

如何在JavaScript中刪除表格中的單元格並重新排序

回答

相關問題