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

的最简单方法

see this fiddle

关键是要获取innerHTML并将其移动到所需的部分

html表值交换

3 个答案: