时间戳

首页 > 解决方案 > 如何使用 jquery 将选定行中的数据复制到另一个表中的文本框？

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

问题描述

我有两张桌子。第一个表显示我的产品，另一个表充当购物车，因此当客户从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>

标签： jqueryhtml-table

解决方案

$('#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>

推荐阅读