title: How to sum the value from a column dynamic table
body: <p>I want to sum the value of total price. I make a <code>sumTransaction()</code> function.  The table is dynamic. Then the value show up to <code>area_total</code>. But how to sum the <code>td</code> value from total price index column?</p>
  
  <p><a href="https://i.stack.imgur.com/gfycq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfycq.jpg" alt="enter image description here"></a></p>
  
  <p>html code</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="form" style="margin-top: 50px;"&gt;
  
          &lt;div class="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="inputEmail3"&gt;Input&lt;/label&gt;
                  &lt;div class=""&gt;
                      &lt;input type="text" class="form-control" id="transaction" placeholder="Input Transaction"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div&gt;
                      &lt;button type="submit" class="btn btn-default" onclick="addTransaction()"&gt;Add&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;table id="table_trans" class="table table-bordered"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Price&lt;/th&gt;
                      &lt;th&gt;Amount&lt;/th&gt;
                      &lt;th&gt;Total Price&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;td colspan="3"&gt;
                          &lt;input type="button" value="Total Price" class="btn btn-success" id="sumTransaction()" /&gt;
                      &lt;/td&gt;
                      &lt;td id="area_total"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  </code></pre>
  
  <p>script code</p>
  
  <pre><code>function addRow(tags) {
      tags = tags.split(',');
      var total = tags[1] * tags[2];
      tags.push(total);
      var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
      var newRow = theTable.insertRow(-1);
      var newCell, theText, i;
      for (i = 0; i &lt; tags.length; i++) {
          newCell = newRow.insertCell(i);
  
          theText = document.createTextNode(tags[i]);
          newCell.appendChild(theText);
      }
  }
  
  function addTransaction() {
      var inputTags = document.getElementById('transaction').value;
      addRow(inputTags);
  }
  
  function sumTransaction() {
      var td = document.getElementById('table_trans').getElementsByTagName('td');
      var total = 0;
  
      for (var i in td) {
          if (td[i])
              total += parseInt(td[i].innerHTML);
      }
      document.getElementById('area_total').innerHTML = total;
  }
  </code></pre>