3

JScriptコードに問題があります。onclickテーブル内のすべての行をループして、イベントを追加しようとしています。onclickイベントを追加することはできますが、いくつか問題があります。

onclick最初の問題は、すべての行がイベントに対して間違ったパラメーターで設定されてしまうことです。

2番目の問題は、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 で関数が呼び出されると、最初にインタープリターがスコープ チェーンを関数が定義されたときの状態に設定します。あなたの場合、スコープチェーンは次のようになります。

   グローバル
     | |
CAll addTableEvents
     | |
CALL onclick

そのため、変数orderIDが JavaScript インタープリターによって発見されると、その変数のスコープ チェーンが検索されます。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

これ以上簡単なことはありません！
明らかに、動的に構築された行で使用できます。
たくさんの愛、
sb。

<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 に答える