Question

我正在使用PHP进行基于Web的POS。有两个表；第一个表的目的是从数据库的搜索框中获取产品。如果有产品，我将标记该复选框，单击“ Enter”按钮并将其转移到第二个表中。我将观看教程从另一个表传输行数据，但是我的问题是我只能传输第一个表中的行，并且由于缺少信息，我想在单元格上添加另一个数据。

我将添加完成的图片。 https://i.stack.imgur.com/rdSSf.png

function tab1_to_tab2()
{
    var table1 = document.getElementById("table1"),
        table2 = document.getElementById("table2"),
        checkboxes = document.getElementsByName("tab1");
        console.log("Val1 = " + checkboxes.length);
        for(var i = 0; i < checkboxes.length; i++)
            if (checkboxes[i].checked) {
                var newRow = table2.insertRow(table2.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
                    cell4 = newRow.insertCell(3);

                    cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
                    cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
                    cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
                    cell4.innerHTML = table1.rows[i+1].cells[3].innerHTML;

                    console.log(checkboxes.length);
            }
}

我希望在我从第一个表中转移行后，将填充“数量”，“小计”和“操作”列。

Answer 1

有很多方法。您也可以这样做，

function add(){
  $('input:checked[name=actionBox]').each(function() {
    var product = $(this).attr('data-product');
    var price = $(this).attr('data-price');
  $('#bill').append("<tr><td>"+product+"</td><td>"+price+"</td><tr>");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>action</th>
  </tr>
  <tr>
    <td>Sample product 1</td>
    <td>200.00</td>
    <td><input type='checkbox' name='actionBox' data-product='Sample product 1' data-price='200.00'>
  </tr>
  <tr>
    <td>Sample product 1</td>
    <td>200.00</td>
    <td><input type='checkbox' name='actionBox' data-product='Sample product 2' data-price='300.00'>
  </tr>
</table>
<br>
<button onclick='add()'>Enter</button>
<br><br>
<table border>
  <tr>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <tbody id='bill'>
  </tbody>
</table>

如何在javascript中的选定单元格行上添加数据？

1 个答案: