使用jQuery将数据从一个表的选定行复制到另一表 [英] Copy data from selected rows of one table to another table using jQuery

问题描述

我有2张桌子，其中一张有我的商品数据，例如名称和条形码. 另一个是空的，我想通过jQuery将产品的表(仅限选定的行)复制到第二个表中.

I got 2 tables one of them has my products data such name,and bar-code. The other one is empty and I want to copy products' table (selected rows only) into the second table via jQuery.

<table id="exampleTable1" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd selected">
            <td class="sorting_1">545333456</td>
            <td>Galaxy S9</td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S6</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>SD 64G </td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S5</td>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>Iphone 7 </td>
        </tr>
    </tbody>
</table>

我的第二张桌子:

<table id="exampleTable2" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

<button class="btn btn-success" data-panelId="copy1" id="copy1">
    Copy from exampleTable1 To exampleTable1
</button>

推荐答案

有一些jQuery方法可以简化此操作，即 .clone() 和 .each() 方法.您可以通过以下方法实现所需的目标:

There are a few jQuery methods that make this easy to do, namely the .clone() and .each() method. You could achieve what you want by the following:

$('#copy1').click(function() {

$('tr.selected', '#exampleTable1').each(function() {

    // For each "selected" row of table1 ..
    var rowFromTable1 = $(this);

    // .. Take a clone/copy of it ..
    var clonedRowFromTable1 = rowFromTable1.clone();

    // .. And append the cloned row to the tbody of table2
    $('tbody', '#exampleTable2').append( clonedRowFromTable1 )
 })

 })

这篇关于使用jQuery将数据从一个表的选定行复制到另一表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！