javascript - html表值交换

Question

我在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并将其移动到所需的部分