SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face 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. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that you might need to rephrase your question with only relevant code to get any help on this one.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    <head>
    <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;
    }
    
    window.onload = function() {
    	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>
    
    </head>
    
    <body>
    <h1>Table Sums</h1>
    
    <table id="monthSums">
    <thead>
    <tr><th>Food</th><th>Parking</th><th>Coffee</th><th>Total</th></tr>
    </thead>
    <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. #4
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But that works only in IE, right ?

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are a great soul.. Thank u very much..

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. I assume it's working okay.

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

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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++) {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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