Skip to content Skip to sidebar Skip to footer
Home / Javascript

Append A Row To A Table And Increment A Value With Javascript

Post a Comment
I have the following code and HTML to append a row to a table. In addition to appending the row I would like to increment the segment number by one but I cannot figure out how to

Solution 1:

I've replaced your id attributes with name attributes, to me the [] at the end is something you'd only do with name, and duplicating ids is not a good thing (copying rows, etc). You don't really need ids there anyway.

Also rather than using the table row/column interface, I've changed it to use the "generic html" interface.

An answer to your actual question is to store the current segment in a variable and increment it when you're creating a new row.

// store the last segment number in a global variablevar lastSegment = 1;

functionaddRow(tableID) {
    var tbody = document.querySelector("#" + tableID + " tbody");
    var rows = tbody.querySelectorAll("tr");

    if(rows.length < 10){ // limit the user from creating too many segments// copy the first TR of the tablevar newRow = rows[0].cloneNode(true);
      // increment the last segment number and apply it to the new segment[] field
      newRow.querySelector("input[name='segment[]']").value = ++lastSegment;
      // add the new row
      tbody.appendChild(newRow);
    } else {
         alert("Maximum Number of Segments is 10.");
    }
}
<h1>Table Example
<inputtype="button"value="Append Segment"onClick="addRow('dataTable')" /></h1><tableid="dataTable"><tbody><td><inputtype="checkbox"name="chk[]"unchecked></td><td><label>Segment: </label></td><td><inputtype="text"name="segment[]"value ="1"></td><td><label>Direction: </label></td><td><selectname="direction[]"><option>...</option><option>Horizontal</option><option>Vertical</option></select></td></tbody></table>

Solution 2:

Dow you want to show incrimented segment no.

<!doctype html><html><head><metacharset="UTF-8"><title>Test</title></head><body><h1>Table Example
    <inputtype="button"value="Append Segment"onClick="addRow('dataTable')" /></h1><tableid="dataTable"><tbody><td><inputtype="checkbox"id="chk[]"unchecked></td><td><label>Segment: </label></td><td><inputtype="text"id="segment[]"value ="1"></td><td><label>Direction: </label></td><td><selectid="direction[]"><option>...</option><option>Horizontal</option><option>Vertical</option></select></td></tbody></table></body><script>functionaddRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount < 10){                          // limit the user from creating too many segmentsvar row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML =         table.rows[0].cells[i].innerHTML;
            }
          row.cells[2].children[0].value = rowCount + 1;              // Increment value of Segment by 1
        }else{
             alert("Maximum Number of Segments is 10.");
        }
    }
</script></html>

Solution 3:

One way to do this would be to get the value of the last row's input, and set the current row's input's value to the incremented value. For instance:

functionaddRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 10) { // limit the user from creating too many segmentsvar lastRow = table.rows[rowCount - 1]; // last rowvar lastRowValue = parseInt(lastRow.cells[2].children[0].value); // lastRow.cells[2] is the <td>...</td>var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
    // Increment value of Segment by 1
    row.cells[2].children[0].value = lastRowValue + 1;
  } else {
    alert("Maximum Number of Segments is 10.");
  }
}
<h1>Table Example
  <inputtype="button"value="Append Segment"onClick="addRow('dataTable')" /></h1><tableid="dataTable"><tbody><td><inputtype="checkbox"name="chk[]"unchecked></td><td><label>Segment: </label></td><td><inputtype="number"name="segment[]"value="1"></td><td><label>Direction: </label></td><td><selectname="direction[]"><option>...</option><option>Horizontal</option><option>Vertical</option></select></td></tbody></table>

A few more things:

  • Also, having duplicate ids for HTML elements is a no-no.
  • I think a type='number' input would be more appropriate than a type='text' one for this situation.

Post a Comment for "Append A Row To A Table And Increment A Value With Javascript"