Question

我的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）。

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

Answer 1

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

   GLOBAL
     |
CAll 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属性。

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

Answer 2

为什么不将事件处理程序附加到表中并获取在单击处理程序中触发click事件的单元格的rowindex。

Answer 3

你不能比这简单得多！
显然可以用于动态构建的行很多爱，
某人

<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>

Javascript Onclick与表行

3 个答案: