Javascript Onclickとテーブル行

StackOverflow https://stackoverflow.com/questions/454517

質問

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が呼び出されると、ループで反復処理を行った最後の値idを持つすべての行に対してonclickが設定されます（94）。

問題を説明するためにいくつかのアラートをページに追加しました。

役に立ちましたか？

解決

関数がJavaScriptで呼び出されると、最初に起こることは、インタープリターがスコープチェーンを関数が定義されたときの状態に設定することです。あなたの場合、スコープチェーンは次のようになります：

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

したがって、変数 orderID がjavascriptインタープリターによってつまずいたとき、変数のスコープチェーンを検索します。 onclick 関数内に orderID が定義されていないため、次に見るべき場所は addTableEvents 内です。ここでは orderID が定義されていると思いますが、 orderID をvarキーワードで宣言しなかったため、 orderID はグローバル変数になったため、 orderID は addTableEvents 内に見つかりません。見るべき最後のスポットはGLOBAL内にあり、十分にそこにあり、その値は割り当てられた最後の値であり、この場合は orderID = row.getAttributeNode（<！> quotの最後の値です; id <！> quot;）。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で機能しました）。

他のヒント

イベントハンドラーをテーブルにアタッチせず、クリックハンドラー内でクリックイベントを発生させたセルのrowindexを取得します。

y'cantはこれよりずっと簡単になります！
動的に構築された行で明らかに使用できます。
たくさんの愛、
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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top