javascript - 如何使用 JavaScript 中动态创建的每个表行来递增数组

Question

我在包含 3 列的表中动态创建行:商品、描述和数量。如何使用每个动态创建的表行来增加数组？

这是我提交下面的表单时得到的结果，其中包含两行具有以下值的表单。

第一行值为:Item1、Description1、Qty1第二行值为:Item2、Description2、Qty2

1=Item1&1=Description1&1=QTY1&1=Item2&1=Description2&1=QTY2

我想返回以下内容:

1=Item1&1=Description1&1=QTY1&2=Item2&2=Description2&2=QTY2

https://jsfiddle.net/rimshot609/zgdvxo83/4/

<form name="SiteForm" id="SiteForm" method="post" action="mailto:test@test.com">
<div class="line-item">
  <fieldset>
    <table id="textbox" border="0">
      <tbody>
        <tr>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
    <input type="itembutton" onclick="createTableRows()" value="Add Item" />
  </fieldset>
</div>

<input type="submit" name="subform" value="Submit Form" />

<script>

  function createTableRows() {
    var someText = 'Item, Name, Qty,'
    var table = document.getElementById("textbox");
    var rowlen = table.rows.length;
    var row = table.insertRow(rowlen);
    row.id = rowlen;


    for (i = 0; i < 2; i++) {


      arr = ['1']; //I need this number to increase by 1 with each table row created.


      var x = row.insertCell(i)
      if (i == 1) {
        x.innerHTML = "<input type='button' onclick='removeCell(" + row.id + ")' value=Delete>"
      } else {
        x.innerHTML = "<input type='textbox' placeholder='Item Number' name='" + arr[i] + "' required='required'><input type='textbox' placeholder='Description' name='" + arr[i] + "' required='required'><input type='textbox' placeholder='QTY' name='" + arr[i] + "' required='required'>"
      }

    }

  }

  function removeCell(rowid) {
    var table = document.getElementById(rowid).remove();
  }

</script>
</form>

Answer 1

无需删除，非常简单。只需替换这一行:

arr = ['1']; //I need this number to increase by 1 with each table row created.

这样:

arr = [row.id]; //I need this number to increase by 1 with each table row created.

row.id 始终设置为 table.rows.length。

但是当你在等式中引入删除时，事情会变得更加复杂。每次删除行时，您都需要更改现有行的值，或者使用以不同方式递增的另一个值。

第一个解决方案感觉相当优雅，但按照这种设置方式，实现起来会有点笨拙。另一个需要类似的东西:

let highestValue = 0;

function createTableRows() {
    highestValue++;
    var someText = 'Item, Name, Qty,'
    var table = document.getElementById("textbox");
    var rowlen = table.rows.length;
    var row = table.insertRow(rowlen);
    row.id = highestValue;

问题是你会有间隙。如果有第 1、2 和 3 行，然后删除 2 行，结果将从 1 跳到 3。