Member Avatar for chineerat

Hi! I need help calculating the summed values of a column. Also, the row values are subtracted from each other eg:

col1   col2   col3 
row1   a     b      = a-b

row2   c     d      = c-d

row3  =a+c   =b+d   =a-b+(c-d)

however there can be N number of rows.
I have listed below and example I have done to calculate the subtracted values but I am having difficulty doing the summations.

<table width="362" border="1">
  <tr>
    <td width="91"> <input name='r1c1' onblur='function update_Total_r1c()' size='6' value=""> r1c1</td>
    <td width="85"> <input name='r1c2' onblur='function update_Total_r1c()' size='6' value="">  r1c2</td>
    <td width="164"> <input name='Total_r1c' onblur='function update_Total_r1c()' size='6' value="">   = r1c1 - r1c2</td>
  </tr>
  <tr>
    <td>rNc1 <input name='rNc1' onblur='function update_Total_rNc()' size='6' value=""></td>
    <td>rNc2 <input name='rNc2' onblur='function update_Total_rNc()' size='6' value=""> </td>
    <td> <input name='Total_rNc' onblur='function update_Total_rNc()' size='6' value=""> = rNc1 - rNc2</td>
  </tr>
  <tr>
    <td>sum( r1c1:rNc1)</td> [B]<- these are the values I am having trouble calculating[/B]
    <td>sum( r1c2:rNc2)</td>[B]<- these are the values I am having trouble calculating[/B]
    <td>sum(of above values)</td> [B]<- these are the values I am having trouble calculating[/B]
  </tr>
</table>
</form>
<script type="text/javascript">
function update_Total_r1c() {
document.f1.Total_r1c1.value = (document.f1.r1c1.value -0) - (document.f1.r1c2.value -0);
}

function update_Total_rNc() {
document.f1.Total_rNc.value = (document.f1.rNc1.value -0) - (document.f1.rNc2.value -0);
}


</script>

Can anyone help?
Thanks

  • 2 Contributors
  • 2 Replies
  • 152 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by chineerat
Member Avatar for Airshow

Chin,

In my experience it's much easier to perform all calculations on every occasion (a la spreadsheet) rather than selectively keeping up with the latest user input.

Hence you only need one function, which can be attached as onblur handler to all user input elements. I guess there must be many ways to formulate the code. This seems reaonably efficient:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#enteredValues input {
	text-align: center;
}
#miniSpread td {
	background-color: #a0e0a0;
}
#miniSpread th {
	background-color: #60b060;
}
#miniSpread td, #miniSpread th {
	width: 70px;
	text-align: center;
}
</style>

<script type="text/javascript">
onload = function(){
	var enteredValues = document.getElementById("enteredValues");
	var inputs = enteredValues.getElementsByTagName("input");
	var columnTotals = document.getElementById("columnTotals");
	
	(function calc(){
		var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
		for(var i=0; i<enteredValues.rows.length; i++){
			var cells = enteredValues.rows[i].cells;
			col_1_total += Number(cells[0].firstChild.value);
			col_2_total += Number(cells[1].firstChild.value);
			col_3_total += Number(cells[2].innerHTML = cells[0].firstChild.value - cells[1].firstChild.value);
		}
		columnTotals.cells[0].innerHTML = col_1_total;
		columnTotals.cells[1].innerHTML = col_2_total;
		columnTotals.cells[2].innerHTML = col_3_total;
	})();//execute calc() immediately to cater for any initial values

	for(var i=0; i<inputs.length; i++){ inputs[i].onblur = calc; }//attach calc as onblur handler to input fields.
};
</script>
</head>

<body>

<table id="miniSpread" border="1">
  <tbody id="enteredValues">
    <tr>
      <td><input size="6" value="9"></td>
      <td><input size="6" value="5"></td>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td><input size="6" value="15"></td>
      <td><input size="6" value="3"></td>
      <th>&nbsp;</th>
    </tr>
  </tbody>
  <tr id="columnTotals">
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
</table>
</form>

</body>
</html>

Notes:

  • All code is defined in an anonymous window.onload handler, not in the global namespace
  • Event handlers are attached in javascript not in the HTML
  • The input and total elements don't need individual ids
  • We use a tbody element to identify the user input rows
Member Avatar for chineerat

Thanks Airshow.
this is exactly what i was looking for.

Edited by chineerat because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.