Confused which javascript event should I use for my situtation. Please help

[tarunkhatri]

I have a javascript function for calculating sum of values in row and colom of a table. It is using get element by id table name. So is table specific.

I am calling that function every time a value changes in the table by

<td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td>

Bu the problem is I even want to call that fucntion at the very start of the page it as soon as my table loads beacuse it has some existing values from the database. I tried using Onload on table level but nothing happened.
I want to know what event should I use for this situation and where should I call it.

Many Thanks.

[Thirusha]

Try using the onload event when the page loads, place the onload event on the body tag.

[tarunkhatri]

I already tried tht. But doesnt make any diffrence

[Troy III]

I have a javascript function for calculating sum of values in row and colom of a table. It is using get element by id table name. So is table specific.

I am calling that function every time a value changes in the table by

<td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td>

Bu the problem is I even want to call that fucntion at the very start of the page it as soon as my table loads beacuse it has some existing values from the database. I tried using Onload on table level but nothing happened.
I want to know what event should I use for this situation and where should I call it.

Many Thanks.

How are you calling the function during onload event?
hopefully not with something like : onload="doAdd(this)" because that's wrong!

[tarunkhatri]

Hi Troy.
I m calling it onload="doAdd(this)". If this is wrong how should I call it. Even i was confused wht variable should i pass on load inplace of this

[Troy III]

Hi Troy.
I m calling it onload="doAdd(this)". If this is wrong how should I call it. Even i was confused wht variable should i pass on load inplace of this

"this"? :')
"this" what? -what is "this"when called from document object or document body?
the function caller, - but you don't want that, you want the exact element on which the function was written for.
so you get its reference by document.getElementById type of thing and add it as a variable value
replacing the "this" keyword with it.

onload=doAdd(someTableElementYouAreAiming);
Refresh the page!

[tarunkhatri]

Yeahh u r rgt. I get ur point. But I m confused how should I change my javascript function to fit my requirements. Can please help how to change it to fot onload requuirement as well as onchange which is on cell level

<script type="text/javascript">
function getColumnCount()
 {
 return document.getElementById('myTable').getElementsByTagName('tr')[0].getElementsByTagName('td').length;         
 }
 
 function getRowCount()
 {
 return document.getElementById('myTable').rows.length;
 }

 function doAdd(ths)
 {
 var lastCol = getColumnCount()-1;
 var lastRow = getRowCount()-1;
  
 //for Column Sum

 var table = document.getElementById("myTable");
 var row = table.rows[ths.parentNode.parentNode.rowIndex];
 var colSum=0;
 for(var i=0;i<lastCol;i++)
 colSum=eval(colSum) + eval(row.cells[i].childNodes[0].value);
 row.cells[lastCol].innerHTML = colSum;
 
 //for Row Sum
 
 var cIndex = ths.parentNode.cellIndex;
 var rowSum = 0;
 for(var i=0;i<lastRow;i++)
 rowSum = eval(rowSum) + parseInt(table.rows[i].cells[cIndex].childNodes[0].value);
 table.rows[lastRow].cells[cIndex].innerHTML = rowSum;

 //for the final Value in the last row last column

 var finSum = 0;
 for(var i=0;i<lastRow;i++)
 finSum = eval(finSum) + parseInt(table.rows[i].cells[lastCol].innerHTML);
 for(var i=0;i<lastCol;i++)
 finSum=eval(finSum) + eval(table.rows[lastRow].cells[i].innerHTML);
 table.rows[lastRow].cells[lastCol].innerHTML = finSum;
  }

[Troy III]

Yeahh u r rgt. I get ur point. But I m confused how should I change my javascript function to fit my requirements. Can please help how to change it to fot onload requuirement as well as onchange which is on cell level

<script type="text/javascript">
function getColumnCount()
 {
 return document.getElementById('myTable').getElementsByTagName('tr')[0].getElementsByTagName('td').length;         
 }
 
 function getRowCount()
 {
 return document.getElementById('myTable').rows.length;
 }

 function doAdd(ths)
 {
 var lastCol = getColumnCount()-1;
 var lastRow = getRowCount()-1;
  
 //for Column Sum

 var table = document.getElementById("myTable");
 var row = table.rows[ths.parentNode.parentNode.rowIndex];
 var colSum=0;
 for(var i=0;i<lastCol;i++)
 colSum=eval(colSum) + eval(row.cells[i].childNodes[0].value);
 row.cells[lastCol].innerHTML = colSum;
 
 //for Row Sum
 
 var cIndex = ths.parentNode.cellIndex;
 var rowSum = 0;
 for(var i=0;i<lastRow;i++)
 rowSum = eval(rowSum) + parseInt(table.rows[i].cells[cIndex].childNodes[0].value);
 table.rows[lastRow].cells[cIndex].innerHTML = rowSum;

 //for the final Value in the last row last column

 var finSum = 0;
 for(var i=0;i<lastRow;i++)
 finSum = eval(finSum) + parseInt(table.rows[i].cells[lastCol].innerHTML);
 for(var i=0;i<lastCol;i++)
 finSum=eval(finSum) + eval(table.rows[lastRow].cells[i].innerHTML);
 table.rows[lastRow].cells[lastCol].innerHTML = finSum;
  }

This is more complicated than that
doAdd(this ...
turns out to be
doAdd(ths)

The "ths" is short for something having to do with the table but I dont understand the h and s part.

So the ths conferteted to function argument through "this" must be the element residing on the Table.

Therefore you must get this element into the function argument for "onload" function call.

The element calling the function is ( as you've mentioned) , the: <td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td> give it an ID, than reference to it with aforementioned method var myInput = document.getElementById("myInput") do the onload call using doAdd(myInput) instead.

thna

[tarunkhatri]

Troy ... thanks very much for your help, but actually i m very new to javascript, so any change I make to my existing code is not helpin me.. Must be doin some poor mistakes. really dnt knw where to change and wht to change.. totally lost.

Still thanks for ur help

[Troy III]

Troy ... thanks very much for your help, but actually i m very new to javascript, so any change I make to my existing code is not helpin me.. Must be doin some poor mistakes. really dnt knw where to change and wht to change.. totally lost.

Still thanks for ur help

No, no, no change in actual code please - make an addition only.

here are the steps:
in this line of code - all you have to do is to ad an ID to that input <td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td> to become: <td><input id="myInput" type="text" value="0" size = "2" onchange="doAdd(this)" ></td> so you will be able to reference it by its id directly instead of goin through "inputs" collection an determining which one it is so tou can pass it to the object pointer on the function call. You need to tell to the document invoking the function "who "THIS" is".

Than somewhere at the end of your script code add a line like this: var myInput = document.getElementById("myInput"); To finish it and see it finally working - if you are calling your function from the body of the document on load <body onload="doAdd(myInput)"... Nothing more so that the function will know "who this is" and you'll see the result immediately.