javascript - htmlテーブル値のスワッピング

Question

で2つのテーブルを作成しましたhtml。チェックボックスで行を選択して、あるテーブルから別のテーブルに行を移動するにはどうすればよいですか。誰かが私にこれを行うためのサンプルJSを教えてもらえますか？ありがとう

Answer 1

これは、 jQueryを使用して行うことができます。このような何かがその仕事をするはずです。

$(function() {
    // Bind button
    $('#moveRows').click(moveSelectedRows);
    // Select All-button
    $('#selectAll').click(function() {
        $('#table1 input[type="checkbox"]').prop("checked", true);
    });
});

function moveSelectedRows() {
    $('#table1 input[type="checkbox"]:checked').each(function() {
        // Remove from #table1 and append to #table2
        $('#table2').append($(this).closest('tr').remove());
        // Remove the checkbox itself
        $(this).remove();
    });
}

HTML

<a href="#" id="selectAll">Select All</a>

<table id="table1">
    <tr>
        <td>Foo1 <input type="checkbox" /></td>
    </tr>
    <tr>
        <td>Bar2 <input type="checkbox" /></td>
    </tr>
</table>

<table id="table2">
    <tr>
        <th>Selected rows</th>
    </tr>
</table>

<a id="moveRows" href="#">Move rows</a>

Answer 2

これを試して：

<script type="text/javascript">
function moveIt() {
  $('#table-1 input[type=checkbox]:checked').each(function() {
    var tr = $(this).parents('tr').get(0);
    $('#table-2').append($(tr));
  });
}
</script>

<table border="1" id="table-1">
  <tr>
    <td><input type="checkbox"></td>
    <td>First</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Second</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Third</td>
  </tr>
</table>

<table border="1" id="table-2">
</table>

<input type="button" onclick="moveIt()" value="move selected lines from table-1 to table-2" />

jQueryを含めることを忘れないでください。

Answer 3

これは、あるtrのコンテンツを別のtrにコピーする最も簡単な方法です。

このフィドルを参照してください

重要なポイントは、innerHTMLを取得し、それを目的の部分に移動することです。