Javascript Onclick Problem with Table Rows

Posted by Shane Larson on Stack Overflow See other posts from Stack Overflow or by Shane Larson
Published on 2009-01-18T02:19:27Z Indexed on 2010/03/21 10:21 UTC
Read the original article Hit count: 511

Hello. I am having problems with my JScript code. I am trying to loop through all of the rows in a table and add an onclick event. I can get the onclick event to add but have a couple of problems.

The first problem is that all rows end up getting set up with the wrong parameter for the onclick event.

The second problem is that it only works in IE.

Here is the code excerpt...

shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
	row = table.getElementsByTagName("tr")[i];
	orderID = row.getAttributeNode("id").value;
	alert("before onclick: " + orderID);
	row.onclick=function(){shanesObj.tableRowEvent(orderID);};
}}

shanesObj.tableRowEvent = function(orderID){
alert(orderID);}

The table is located at the following location...

http://www.blackcanyonsoftware.com/OrderTracker/testAJAX.html

The id's of each row in sequence are... 95, 96, 94...

For some reason, when shanesObj.tableRowEvent is called, the onclick is set up for all rows with the last value id that went through iteration on the loop (94).

I added some alerts to the page to illustrate the problem.

Thanks.

Shane

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about javascript-events