How do I access the last cell of dynamic table to get the total

Question

I am calculating the total from a table on the last column input

Currently the alert for td shows [Object Nodelist]

 function calcTotal() { var table = document.getElementById("invoice_details"); //var tot = 0; var tot=$("#service_cost").val(); //alert(tot); var sumvval=0; var table_length=table.rows.length; //alert(table_length); var td = document.querySelectorAll('#invoice_details > tbody > tr > td:last-child'); //var val = document.querySelector('#invoice_details tbody tr td:last-child input').value; alert(td[0]); var total=0; for (var i = 0; i < td.length; i++) { total += parseFloat(td[i].innerText); } total=total+parseFloat(tot); document.getElementById("total_invoice_amount").value = parseFloat(total); }

 <table class="table table-striped" id="invoice_details"> <tbody id="generate_invoice_table"> <tr> <td><input class="form-control" readonly="" value="57" name="item_id[]"></td> <td><input class="form-control" readonly="" value="Toyota" name="supplier_name[]"></td> <td><input hidden="" class="form-control" readonly="" value="Item" name="type[]"></td> <td><input class="form-control" readonly="" value="Fan Belt Aqua" name="item_description[]"></td> <td><input class="form-control" readonly="" value="1" name="available_qty[]"></td> <td><input class="form-control" readonly="" value="12000.00" name="retail_price[]"></td> <td><input type="text" value="0" class="form-control text-right" name="qty[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td> <td><input type="text" value="0" class="form-control text-right" name="discount[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td> <td><input type="text" class="form-control text-right" name="price[]"></td> </tr> </tbody> </table>

Answer 1

When you have a array and you are using in table then you can simply get the last value from dynamic table.

var last = array.length -1 ;
console.log("Last value ::: ", array[last]);