I need it to update the column totals when the row updates so I assume I can add it into the current script but I am in over my head.
I am using the below script to total the rows:
<script>
function total_amount(){
var table = document.getElementById('line_item');
for(var i=1;i<table.rows.length;i++){
qty = table.rows[i].cells[1].getElementsByTagName("input")[0].value
unit = table.rows[i].cells[2].getElementsByTagName("input")[0].value
table.rows[i].cells[3].getElementsByTagName("input")[0].value = qty * unit;
}
}
</script>
I am looking to do the same with the column that this script returns. I have attempted and failed to convert this to a column script, I tried several different totaling scripts but since I need it to update after the user updates their part I seem to keep breaking it.
My table
<table class="table table-striped" id="line_item" data-togle="table" data-sort-stable="true">
<thead>
<tr>
<th>
Product
</th>
<th>
Quantity
</th>
<th>
Price Unit
</th>
<th>
Amount
</th>
<th>
Date of Service
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="col0">
[select SERVICES1]</td>
<td id="col1">
[number Quantity onblur="total_amount()"]
</td>
<td id="col2">
<input class="form-control" type="number" placeholder="Price Unit" id="unit" onblur="total_amount()">
</td>
<td id="col3" class="count-me">
[number amount]
</td>
<td>[date DOS1]</td> </tr>
<tr>
<td id="col0">
[select SERVICES2]
</td>
<td id="col1">
[number Quantity2 onblur="total_amount()"]
</td>
<td id="col2">
<input class="form-control" type="number" placeholder="Price Unit" id="unit2" onblur="total_amount()">
</td>
<td id="col3" class="count-me">
[number amount2 readonly]
</td>
<td>[date DOS2]</td> </tr>
<tr>
<td id="col0">
[select SERVICES3] </td>
<td id="col1">
[number Quantity3 onblur="total_amount()"]
</td>
<td id="col2">
<input class="form-control" type="number" placeholder="Price Unit" id="unit3" onblur="total_amount()">
</td>
<td id="col3" class="count-me">
[number amount3 readonly]
</td>
<td>[date DOS3]</td> </tr>
<tr>
<td id="col0">
[select SERVICES4]
</td>
<td id="col1">
[number Quantity4 onblur="total_amount()"]
</td>
<td id="col2">
<input class="form-control" type="number" placeholder="Price Unit" id="unit4" onblur="total_amount()">
</td>