title: append a row to a table and increment a value with javascript
body: <p>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?</p>
  
  <p>code snippet :</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount &lt; 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&lt;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.");
        }
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Table Example
       &lt;input type="button" value="Append Segment" onClick="addRow('dataTable')" /&gt; 
       &lt;/h1&gt;
       &lt;table id="dataTable"&gt;
        &lt;tbody&gt;
         &lt;td&gt;&lt;input type="checkbox" id="chk[]" unchecked&gt;&lt;/td&gt;
         &lt;td&gt;&lt;label&gt;Segment: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input type="text" id="segment[]" value ="1"&gt;&lt;/td&gt;
         &lt;td&gt;&lt;label&gt;Direction: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;select id="direction[]"&gt;
           &lt;option&gt;...&lt;/option&gt;
           &lt;option&gt;Horizontal&lt;/option&gt;
           &lt;option&gt;Vertical&lt;/option&gt;
          &lt;/select&gt;&lt;/td&gt;
        &lt;/tbody&gt;
       &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>