Below is a piece of code I would like to add variable called Total which would be updated if a new row is added(adding amount to Total) or deleted(subtracting the particular row amount from the Total). How do I acheive that? ANy pointers would do.
Thanks in advance.
<html>
<head>
<title>Manipulating Tables</title>
<script type="text/javascript">
function addRow(tableId, cells){
var tableElem = document.getElementById(tableId);
var newRow = tableElem.insertRow(tableElem.rows.length);
var newCell;
for (var i = 0; i < cells.length; i++) {
newCell = newRow.insertCell(newRow.cells.length);
newCell.innerHTML = cells;
}
return newRow;
}
function deleteRow(tableId, rowNumber){
var tableElem1 = document.getElementById(tableId);
if (rowNumber > 0 && rowNumber < tableElem1.rows.length) {
tableElem1.deleteRow(rowNumber);
} else {
alert("Failed");
}
}
</script>
</head>
<body>
<table id="tblPeople" border="1">
<tr>
<th>Hour</th>
<th>Rate</th>
<th>Amount </th>
</tr>
</table>
<hr>
<form name="formName">
Hour: <input type="text" name="Hour"><br>
Rate: <input type="text" name="Rate"><br>
<input type="hidden" name="amount" id="amount"><br>
Subtotal:<input type="text" name="subtotal" id="subtotal"><br>
<input type="button" value="Add Name"
onclick="addRow('tblPeople',
[this.form.Hour.value, this.form.Rate.value, this.form.Hour.value * this.form.Rate.value ] )" ";>
<hr>
Remove Row: <input type="text" size="1" name="RowNum">
<input type="button" value="Delete Row"
onclick="deleteRow('tblPeople', this.form.RowNum.value)">
</form>
</body>
</html>