CODEWITHSUNDEEP
javascript
Shane
Shane

Reputation: 542

How to increment an array with each dynamically created table row in JavaScript

I'm dynamically creating rows in a table with 3 columns: Item, Description & QTY. How do I increment an array with each dynamically created table row?

Here's the results I'm getting when submitting the form below containing two rows with the following values.

The first row values are: Item1, Description1, Qty1 and the second row values are: Item2, Description2, Qty2

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

I would like to return the following instead:

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:[email protected]">
<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>

Upvotes: 0

Views: 366

Answers (1)

Michael Beeson
Michael Beeson

Reputation: 2875

Without deletion, it's very simple. Just replace this line:

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

With this:

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

row.id is always set to table.rows.length.

But when you introduce Deletion into the equation things get more complicated. Each time you delete a row you'll want to either change the value for the existing rows, or use another value that you increment differently.

The first solution feels quite elegant, but with the way this has been set up would be a little clunky to implement. The other would require something like:

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;

The problem is that you'll have gaps. If you have rows 1, 2 and 3 then delete 2, the results will jump from 1 to 3.

Upvotes: 1

Related Questions