3

我的 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("before 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) 上经过迭代的所有行。

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

4

3 回答 3

3

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

   全球的
     |
调用 addTableEvents
     |
CALL onclick

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

要更清楚地看到这一点，请查看以下内容

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);
}

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

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

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

}

只需直接从被调用对象访问 id 属性即可。

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

于 2009-01-18T05:51:46.483 回答
2

为什么不将事件处理程序附加到表并获取在单击处理程序内触发单击事件的单元格的行索引。

于 2009-01-18T02:53:12.817 回答
-1

你不能比这更简单！
显然可以与动态构建的行一起使用。
很多的爱，
某人。

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var TO,URL;
function Link(url){
 URL=url;
 TO=setTimeout('window.location=URL;',500);
}
//-->
</script>
</head>

<body>

<tr onclick="Link('anotherpage.html');">
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>

<tr onclick="Link('yetanotherpage.html');">
<td>row2 cell3</td>
<td>row2 cell4</td>
</tr>

</body>

</html>
于 2010-03-21T10:11:17.977 回答