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

それがコード化される必要があり、アルゴリズムの少しです。

私はjQueryや他のフレームワークに精通していないので、単にDOM機能を使用しましたが、アルゴリズムの考え方を理解できると思います。それを変換するのは難しいことではありません。

<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内のテーブル内のセルを削除して並べ替える方法

答えて

関連する問題