jquery - jQuery で html テーブルを再配置するコード

Question

これからどうすればいいですか：

<tr>
    <td>A</td>
    <td><input for A></td>
</tr>
<tr>
    <td>B</td>
    <td><input for B></td>
</tr>

これに：

<tr>
    <td>A</td>
    <td>B</td>
</tr>
<tr>
    <td><input for A></td>
    <td><input for B></td>
</tr>

行を n (これは、データ セットから取得した行の数に基づいて変化します。この場合は 2 列ですが、任意の数にすることができます) の列に移動する必要があります。どうすればこれを達成できますか？

Answer 1

テーブル データを 2 次元配列に読み込み、テーブル データを転置行列で上書きするだけです。

function reArrange() {
    var table = $('table#theTable');
    // we will store all the table-data in a two-dim array:
    var data = new Array();
    // find all rows (row-index: i):
    $(table).find('tr').each(function(i, row) {
        // find all cells in this row (col-index: j):
        $(row).find('td').each(function(j, cell) {
            // make sure, we got the array right:
            if ( data[j] === undefined ) {
                data[j] = new Array();
            }
            // use col-index as first index in the array:
            data[j][i] = $(cell).html();
        });
    });
    // reset table:
    $(table).find('tr').remove();  
    // re-fill table
    $(data).each(function(i, elem){
        var row = $('<tr/>');
        $(elem).each(function(j, col) {
            cell = $('<td/>').html(col);
            $(row).append(cell);
        });
        $(table).append(row);
    });

}
reArrange(); 

この jsFiddle をご覧ください: http://jsfiddle.net/66YpC/2/

これがあなたが探していたものであることを願っています。コードについてさらに情報が必要な場合は、お知らせください。