Javascript：从表格中提取单元格数据

Question

我有一个方案，其中有一个4行的表，在第4行是一个文本框。 触发文本框的“ onchange”事件时，我想将同一特定行的单元格中的数据提取到另一个表中。 当然，我的桌子是由多行组成的。

<div class="ProductsTable">
    <table class="tablestyle">
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Preview</th>
            <th class="auto-style4">Quantity</th>
            <th class="auto-style15">Selected Items</th>
        </tr>
        <tr id="row1">
            <td class="auto-style1" id="item_name">Sofa</td>
            <td class="auto-style2" id="item_price">$280.00</td>
            <td class="auto-style3">
                <img class="itemimage" src="images\sofa1.jpg" />
            </td>
            <td class="auto-style4">
                <input class="quantitybox" id="item_quantity" type="text" onchange="get_quantity();" />
            </td>
            <td rowspan="10">
                <table class="InvoiceTable" id="invoice">
                    <tr>
                        <th class="auto-style7">Item</th>
                        <th class="auto-style2">Price</th>
                        <th class="auto-style4">Quantity</th>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

我的JavaScript是：

function get_quantity() {
    var table = document.getElementById("invoice");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2)
    cell1.innerHTML = document.getElementById("item_name").innerHTML;
    cell2.innerHTML = document.getElementById("item_price").innerHTML;
    cell3.innerHTML = document.getElementById("item_quantity").value;
}

当触发“ onchange”事件时，如何创建循环以检查所有表。 因为我的表中实际上有10行。 最好不使用jquery。

Answer 1

如果我对您的理解正确，那么您正在寻找一种函数来将更改后的行的内容（即每一列中的数据）复制到发票表中。

我希望通过某种迭代来动态创建行。 迭代时，我希望有一个唯一的数字，为什么可以将此数字用作常规选择器。

这是执行此操作的功能：

function get_quantity(rowNumber) {
  var table = document.getElementById("invoice" + rowNumber);
  var row = table.insertRow(1);

  var columns = document.getElementById("row" + rowNumber).childNodes;

  var dataColumnIndex = 0;
  for (var i = 0; i < columns.length; i++) {
    if (columns[i].className == "data") {
      var cell = row.insertCell(dataColumnIndex);
      cell.innerHTML = columns[i].innerHTML;

      dataColumnIndex++;
    }
  }

  var inputQuantity = document.getElementById("item_quantity" + rowNumber).value
  row.insertCell(dataColumnIndex).innerHTML = inputQuantity;
}

您可以通过使用类data标记列来选择要复制的列。 我期望发票表具有id invoice + number ，从而获得发票表。 Fx。 invoice1 。 每行和输入字段都相同。

这是一个完整的例子 。

编辑

所有产品都应添加到一个发票表中。 通过在功能中选择用于行插入的同一表，可以解决此问题。

此更新的插件有更改