append a row to a table and increment a value with javascript

Question

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 do that. Can anyone help? MORE IMPORTANTLY, can you also tell me where I would go to find the answer to my question in the JavaScript documentation?

code snippet :

---

    	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;
    			}
    			// Increment value of Segment by 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" 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>

Answer 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>