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

October 30, 2022 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 variable
var lastSegment = 1;

function addRow(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 table
      var 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
<input type="button" value="Append Segment" onClick="addRow('dataTable')" /> 
</h1>
<table id="dataTable">
    <tbody>
        <td><input type="checkbox" name="chk[]" unchecked></td>
        <td><label>Segment: </label></td>
        <td><input type="text" name="segment[]" value ="1"></td>
        <td><label>Direction: </label></td>
        <td><select name="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>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
    <h1>Table Example
    <input type="button" value="Append Segment" onClick="addRow('dataTable')" /> 
    </h1>
    <table id="dataTable">
        <tbody>
            <td><input type="checkbox" id="chk[]" unchecked></td>
            <td><label>Segment: </label></td>
            <td><input type="text" id="segment[]" value ="1"></td>
            <td><label>Direction: </label></td>
            <td><select id="direction[]">
                    <option>...</option>
                    <option>Horizontal</option>
                    <option>Vertical</option>
                </select></td>
        </tbody>
    </table>
</body>
<script>
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount < 10){                          // limit the user from creating too many segments
            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;
            }
          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:

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 10) { // limit the user from creating too many segments
    var lastRow = table.rows[rowCount - 1]; // last row
    var 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
  <input type="button" value="Append Segment" onClick="addRow('dataTable')" />
</h1>
<table id="dataTable">
  <tbody>
    <td><input type="checkbox" name="chk[]" unchecked></td>
    <td><label>Segment: </label></td>
    <td><input type="number" name="segment[]" value="1"></td>
    <td><label>Direction: </label></td>
    <td><select name="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.

JavaScript OfficialSite

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

Solution 1:

Solution 2:

Solution 3:

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