Using nth-child in tables tr td to get Values and Find Total

Question

I have run to a problem with my JavaScript, I'm new to javascript and have just started integrating it with my web application. I have my javascript here:

<script type="text/javascript">

 function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
   var tot=0;

   for(var i=0;i<arr.length;i++){
      if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
   }
   document.getElementById('total').value = tot;
 }

</script>

This addRow Function here serves as my function in adding a cell each type I click "add entry" Here's a bit of my HTML:

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>     
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br></p>
  </fieldset></h3>
  </div><!-- COL5 END -->

I just took out the HTML codes that are involved with this problem. I am using addRow() to add each function. The Second column gets a numeric value. For example. 200.00 or 232 r 2.2 What I wanted to do is to get the total while I'm adding it real-time. I have inspected the adding of cells in the developer options in the Mozilla browser it shows that the digits are falling to each of the tr's second td.

So I used var arr = document.querySelectorAll("#datatable td:nth-child(2)"); in my totaling function hoping that I would get the list and evaluate it. However I am unable to do this, there's nothing showing in my total UI. or.. Am I really getting my amounts in the using that? This worked when I was implementing it using checkboxes so I know how it would work. Every time I add a value it shows on the total box whenever something gets added. But here it's different. I found an answer that says nth-child gets non-live object list. Should I make the objects live before I can evaluate it in the total? I'm really stuck at this part. If you have any ideas on how to fix this please do help me. or if you could give me an alternative way to add cells then totaling it real-time that would also help.

I could make do with the submission type, but the page gets reloaded and it will be a hassle for the user to scroll down again. This part of the app, when you add a cell it just pops there without the page reloading, as to why I used javascript to implement this function.

Here are pics of how it works:

Console shows:

Any help is appreciated. Thank you very much!

Answer 1

function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
     findTotal();
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
  
   var tot=0;

   for(var i=0;i<arr.length;i++){
      var enter_value   = Number(arr[i].textContent) //id u want do parseInt(enter_value)
      if(enter_value)
                tot += Number(arr[i].textContent);
      }
   document.getElementById('total').value = parseInt(tot);
 }

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br></p>
  </fieldset></h3>
  </div><!-- COL5 END -->

Answer 2

This is the faulty code:

 var arr = document.querySelectorAll("#datatable td:nth-child(2)");
 var tot=0;

 for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].value))
    tot += parseInt(arr[i].value);
 }

In here, arr is a collection of DOM nodes, matching #datatable td:nth-child(2) selector. You're trying to sum up their value properties. However, <td> elements do not have a value. You might want to try getting their innerText property:

 for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].innerText))
    tot += parseInt(arr[i].innerText);
 }

Note you're closing a </p> you never opened just after the total field. There might be other problems with your script, but this one caught my eye.

See it working here. (I've stripped it down to minimum).

Answer 3

This should work.

Not the best code but a hot fix for yours.

I recomend you to look into html data- attributes

 function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
    
    findTotal();
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
   var tot=0;

   for(var i=0;i<arr.length;i++){
        tot += parseInt(arr[i].innerHTML);
   }
   document.getElementById('total').value = tot;
 }

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>     
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br>
  </fieldset></h3>
  </div><!-- COL5 END -->