# Thread: Sum of rows,Expense Report

1. ## Sum of rows,Expense Report

How will I do this ?
Usually, I have 31 rows depends on the month. I populate each day twice...And my sample input fields are inside code section...After all fields are entered a dolar amount as (\$xx.xx), the total sum of each row should be assing to " <div id="tot11" style="position:absolute; z-index:100;"></div> " ...Then the value of all id="tot..." should be added as the total of all rows into <div id="Alltot">

Code:
```<td><input name="Amount|11" title="Amount" id="Amount11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Tolls|11" title="Tolls" id="Tolls11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td ><input name="Hotel|11" title="Hotel" id="Hotel11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Meals|11" title="Meals" id="Meals11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Phn|11" title="Phone" id="Phn11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Parking|11" title="Parking" id="Parking11" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td colspan="14"><span class="orangetext12"><b><div id="tot11" style="position:absolute; z-index:100;"></div></b></span></td>

-------------Next Row -------
<td><input name="Amount|12" title="Amount" id="Amount12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Tolls|12" title="Tolls" id="Tolls12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td ><input name="Hotel|12" title="Hotel" id="Hotel12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Meals|12" title="Meals" id="Meals12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Phn|12" title="Phone" id="Phn12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Parking|12" title="Parking" id="Parking12" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td colspan="14"><span class="orangetext12"><b><div id="tot12" style="position:absolute; z-index:100;"></div></b></span></td>
----------------Next Row-------
<td><input name="Amount|21" title="Amount" id="Amount21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Tolls|21" title="Tolls" id="Tolls21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td ><input name="Hotel|21" title="Hotel" id="Hotel21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Meals|21" title="Meals" id="Meals21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Phn|21" title="Phone" id="Phn21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td><input name="Parking|21" title="Parking" id="Parking21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" onBlur="Calc2(this.name,this.value)"></td>
<td colspan="14"><span class="orangetext12"><b><div id="tot21" style="position:absolute; z-index:100;"></div></b></span></td>```

2. I think that you might need to rephrase your question with only relevant code to get any help on this one.

3. I think your page would be a lot clearer if you removed the styles from the table cells and put them in a style element or external stylesheet. Also, you have divs inside spans which may be a bit odd.

Unless you need to access the cells individually, you may not need to give them all names and ids.

The following code iterates through the rows of the table and the cells of each row, calculating totals. Is it the kind of thing you were after?

Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table Sums</title>
<script type="text/javascript">
function totalTable(tableID) {
var myTable = document.getElementById(tableID);
var rows = myTable.getElementsByTagName("tbody")[0].rows;
var tableTotal = 0;
for (var i = 0; i < rows.length - 1; i++) {
var cells = rows[i].cells;
var rowTotal = 0;
for (var j = 0; j < cells.length - 1; j++) {
rowTotal += parseFloat(cells[j].getElementsByTagName("input")[0].value);
}
cells[cells.length - 1].innerHTML = rowTotal;
tableTotal += rowTotal;
}
document.getElementById("totalCell").innerHTML = tableTotal;
}

var tableID = "monthSums";
var myTable = document.getElementById(tableID);
var textBoxes = myTable.getElementsByTagName("input");
for (var i = 0; i < textBoxes.length; i++) {
textBoxes[i].onblur = function() {totalTable(tableID);};
}
}

</script>

<body>
<h1>Table Sums</h1>

<table id="monthSums">
<tr><th>Food</th><th>Parking</th><th>Coffee</th><th>Total</th></tr>
<tbody>
<tr><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td>0</td></tr>
<tr><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td>0</td></tr>
<tr><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td><input type="text" value="0" /></td><td>0</td></tr>
<tr><td colspan="4" id="totalCell">0</td></tr>
</tbody>
</table>

</body>
</html>```

4. But that works only in IE, right ?

5. You are a great soul.. Thank u very much..

6. No problem. I assume it's working okay.

I don't know if it works in IE. I tested it in Safari.

7. And I forget to mention...My first 5 td in table rows will contain string values...so I dont want to add them to calculation...starting the 6th td till 12th requires a sum ?
How will i do that ?

8. The first five index want to be skipped [0, 1, 2, 3, 4] the for loop should start from 5.

Code Javascript:
`for (var i = 5; i < rows.length - 1; i++) {`

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•