Question

我有两个桌子。第一个表显示了我的产品，另一个表充当了购物车，因此当客户从table1中选择一种产品时，其数据（名称，价格等）将被复制到第二个表的文本框中。

我的问题：如何使用jQuery复制table1中仅个选定行的数据并将其附加到table2的文本框中？

这是表1：

<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>

这是表2：

<table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="Barcode" /></td>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="Price" /></td>
        </tr>
    </tbody>
</table>

Answer 1

有两行被选中，我不确定第二行中的值会发生什么变化，因为另一张表中只有一组输入。

$('#copy1').click(function() {
  let cells = $('.selected').children();
  $('#Barcode').val($(cells[0]).text());
  $('#txtName').val($(cells[1]).text());
  $('#Price').val($(cells[2]).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>
    
    <table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="Barcode" /></td>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="Price" /></td>
        </tr>
    </tbody>
</table>

Answer 2

$('#copy1').click(function() {
  let tbody = $('#tb2 tbody')
  
  $('.selected').each(function(index) {
    let cells = $(this).children();
    let tr = $('<tr>');
    tr.append($('<td>').append($('<input>').val($(cells[0]).text()).attr('id', 'Barcode' + index)));
    tr.append($('<td>').append($('<input>').val($(cells[1]).text()).attr('id', 'txtName' + index)));
    tr.append($('<td>').append($('<input>').val($(cells[2]).text()).attr('id', 'Price' + index)));
    tbody.append(tr)
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>
    
    <table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

如何使用jquery将数据从选定的行复制到另一个表中的文本框？

2 个答案: