SitePoint Sponsor

User Tag List

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

    Angry Cross Sum, Js Help

    Why does this dont work ? I am using IE ...I did some debug but couldnt find it...
    Code:
    <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 = 7; j < cells.length - 1; j++) { //TD
    			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 = 7; i < textBoxes.length; i++) { //TD
    		textBoxes[i].onblur = function() {totalTable(tableID);};
    	}
    }
    
    </script>
    
    </head>
    <body>
    <h3>Table Sums</h3>
    
    <table id="monthSums">
    <thead>
    <tr><th>Date</th><th>Prj</th><th>Details</th><th>Comp</th><th>Conta</th><th>Town</th><th>Mile</th><th>Amount</th><th>Tolls</th><th>Hotel</th><th>Meals</th><th>Phone</th><th>Parking</th><th>Total</th></tr>
    </thead>
    <tbody>
    		<tr>
    			<td bgcolor="#CCCC99">1/2/2008</td>
    			<td><input name="Prj|21" id="Prj21" type="text" size="10" maxlength="30"   style="border-color:;font-size:9px;height:15px; width:58px" title="Project Number" ></td>
    			<td><input name="Details|21" title="Details" id="Details21" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td><input name="Comp|21" title="Company" id="Comp21" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td><input name="CP|21" title="Contact Person"  id="CP21" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td ><input name="Town|21" title="Town"  id="Town21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td ><input name="Miles|21" title="Miles" id="Miles21" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px"></td>
    			<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"></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" ></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" ></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" ></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" ></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" ></td>
    			<!---td colspan="14"><span class="orangetext12"><b><div id="tot21" style="position:absolute; z-index:100;"></div></b></span></td--->
    			<td>0</td>
    		</tr>
    	 	<thead>
    			<tr>
    				<td colspan="14"><div id="txtHint21" style="position:absolute; z-index:100;"></div></td>
    				<input name="Tarih|21" type="hidden" value="1/2/2008|Wednesday">
    			</tr>
    		</thead>
    		<tr>
    			<td bgcolor="#CCCC99">1/2/2008</td>
    			<td><input name="Prj|22" id="Prj22" type="text" size="10" maxlength="30"    style="border-color:;font-size:9px;height:15px; width:58px" title="Project Number" ></td>
    			<td><input name="Details|22" title="Details" id="Details22" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td><input name="Comp|22" title="Company" id="Comp22" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td><input name="CP|22" title="Contact Person"  id="CP22" type="text" size="10" maxlength="30" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td ><input name="Town|22" title="Town"  id="Town22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:58px"></td>
    			<td ><input name="Miles|22" title="Miles" id="Miles22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px"></td>
    			<td><input name="Amount|22" title="Amount" id="Amount22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px"></td>
    			<td><input name="Tolls|22" title="Tolls" id="Tolls22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" ></td>
    			<td ><input name="Hotel|22" title="Hotel" id="Hotel22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" ></td>
    			<td><input name="Meals|22" title="Meals" id="Meals22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" ></td>
    			<td><input name="Phn|22" title="Phone" id="Phn22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" ></td>
    			<td><input name="Parking|22" title="Parking" id="Parking22" type="text" size="3" maxlength="10" style="border-color:;font-size:9px; height:15px; width:30px" ></td>
    			<!---td colspan="14"><span class="orangetext12"><b><div id="tot22" style="position:absolute; z-index:100;"></div></b></span></td--->
    			<td>0</td>
    		</tr>
    	 	<thead>
    			<tr>
    				<td colspan="14"><div id="txtHint22" style="position:absolute; z-index:100;"></div></td>
    				<input name="Tarih|22" type="hidden" value="1/2/2008|Wednesday">
    			</tr>
    		</thead>
    <tr><td colspan="14" id="totalCell">0</td></tr>
    </tbody>
    </table>

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note: ... It should adding the numbers starting the "Amount " that is the 7th column..

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can have multiple <thead> sections, or <thead> sections inside <tbody>

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesnt work without that too

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a slight change to the functions:
    Code:
    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;
    		if (cells.length == 14) {
    			for (var j = 7; j < cells.length - 1; j++) { //TD
    				rowTotal += parseFloat(cells[j].getElementsByTagName("input")[0].value) || 0;
    			}
    		
    			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");
    	alert(textBoxes.length);
    	for (var i = 7; i < textBoxes.length; i++) { //TD
    		textBoxes[i].onblur = function() {totalTable(tableID);};
    	}
    }
    It now uses 0 for the value of empty text boxes, rather than NaN.

    You may want to iterate from i = 6.

    A condition has been added to check that the row has 14 cells. The 14 is hard coded - you may want to make it more flexible.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2004
    Location
    ny
    Posts
    560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much...I apprec


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
  •