带有表格行的 Javascript Onclick答案

【问题标题】：Javascript Onclick with Table Rows带有表格行的 Javascript Onclick
【发布时间】：2010-10-02 01:20:45
【问题描述】：

我的 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) 上经历了迭代。

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

【问题讨论】：

标签： javascript onclick dom-events

【解决方案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>

【讨论】：

【解决方案2】：

在 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属性即可。

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

【讨论】：

谢谢。这很有效，也帮助我理解了问题。
P.S.现在代码已经更正，这在 Firefox 和 IE 中确实有效。再次感谢！
只是添加一些让我印象深刻的注释：如果您定期重新生成表，例如通过定期 AJAX 轮询，请不要忘记每次都重新添加侦听器。此外，如果您正在查看“td”，索引似乎需要从 0 开始 - 不确定“tr”也是如此。

【解决方案3】：

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

【讨论】：