Javascript Onclick与表行 [英] Javascript Onclick with Table Rows

问题描述

我的JScript代码出现问题。我试图遍历表中的所有行并添加onclick事件。我可以添加onclick事件，但有一些问题。

第一个问题是所有行最终都设置了onclick事件的错误参数。

第二个问题是它只适用于IE。

以下是代码摘录...

  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（在onclick之前：+ orderID）; 
 row.onclick = function（）{shanesObj.tableRowEvent（orderID）;}; 
}} 
 
 shanesObj.tableRowEvent = function（orderID）{
 alert（orderID）;} 
  

该表位于以下位置...

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

序列中每行的id是...... 95,96,94 ......

出于某种原因，当调用shanesObj.tableRowEvent时，onclick被设置对于在循环上经历迭代的最后一个值id的所有行（94）。

我在页面上添加了一些警告来说明问题。

解决方案

当在javascript中调用函数时，首先发生的事情是解释器将范围链设置为当它处于的状态时功能已定义。在您的情况下，范围链如下所示：

 
 GLOBAL 
 | 
 CAll addTableEvents 
 | 
 CALL onclick 
 

因此，当javascript解释器偶然发现变量 orderID 时，它会搜索该变量的范围链。 onclick 函数中没有定义 orderID ，因此下一个要查看的内容是 addTableEvents 。您会认为此处定义了 orderID ，但由于您未使用var关键字声明 orderID ，因此 orderID 成为全局变量，因此 addTableEvents 中找不到> orderID 。要查看的最后一个位置是GLOBAL内部，当然它就在那里，它的值是它被分配的最后一个，在这种情况下它的最后一个值 orderID = row.getAttributeNode（id） for循环中的.value; 。

要更清楚地看到以下内容

  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（在onclick之前：+ orderID）; 
 row.onclick = function（）{var orderID = orderID; shanesObj.tableRowEvent（的orderID）;}; 
} 
 orderID = -1; 
} 
 
 shanesObj.tableRowEvent = function（orderID）{
 alert（orderID）; 
} 
  

点击此处的结果将始终为-1。

因此，为了解决这个问题，我建议你删除所有额外和不需要的代码并使用类似下面的内容，

  for（i = 1; i< table.getElementsByTagName（tr）。length; i ++）{
 row = table.getElementsByTagName（tr）[i]; 
 row.onclick = function（）{shanesObj.tableRowEvent（this.id）;}; 
 
} 
  

只需直接从被调用对象访问id属性。 / p>

PS我不知道为什么你的代码在IE中不起作用（它在我的IE7中有效）。

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.

解决方案

When a function is called in javascript, the first thing that happens is that the interpreter sets the scope chain to the state it was in when the function was defined. In your case the scope chain looks like:

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

So when the variable orderID is stumbled upon by the javascript interpreter it searches the scope chain for that variable. There is no orderID defined inside your onclick function, so the next spot to look is inside addTableEvents. You would think orderID is defined here, but since you did not declare orderID with the var keyword, orderID became a global variable, so orderID is not found inside addTableEvents. The last spot to look is inside GLOBAL, and sure enough it is there, and its value is the last one which it was assigned, and in this case its the last value of orderID = row.getAttributeNode("id").value; in the for loop.

To see this more clearly look at the following

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(){var orderID = orderID; shanesObj.tableRowEvent(orderID);};
}
orderID = -1;
}

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

The result of a click here will always be -1.

So, to get around this problem, I suggest you drop all the extra and unneeded code and use something like the following,

for(i=1; i<table.getElementsByTagName("tr").length; i++){
        row = table.getElementsByTagName("tr")[i];
        row.onclick=function(){shanesObj.tableRowEvent(this.id);};

}

Just access the id attribute directly from the called object.

P.S. I have no idea why your code doesn't work in IE (it worked in my IE7).

这篇关于Javascript Onclick与表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！