クリック時に行番号を別の関数に送信

Question

私はテーブルがあり、各行にはクリック機能が必要です。

行番号とテキストを別の関数に送信したいと思います。

行をクリックすると、正しいテキストが表示されますが、行ごとに合計行数が表示されます。クリックされた現在の行の番号はどのように指定しますか？

var table = document.getElementById("orders"); 
if (table != null) { 
    for (var i = 0; i < table.rows.length; i++) { 
     for (var j = 0; j < table.rows[i].cells.length; j++) 
     table.rows[i].cells[j].onclick = function() { 
      tableText(this, i); 
     }; 
    } 
} 

function tableText(tableCell, i) { 
    alert(tableCell.innerHTML + i); 
} 

Answer 1

は、JavaScript varスコープに共通の問題が発生しています。問題は、変数がforループのスコープであり、ブロックではないことです。これは、変数がforのそれ以上の反復ごとに変化し続けることを意味します。

あなたが簡単にES6 letであることを修正することができます

：

const table = document.getElementById("orders"); 
if (table != null) { 
    for (let i = 0; i < table.rows.length; i++) { 
     for (let j = 0; j < table.rows[i].cells.length; j++) 
     table.rows[i].cells[j].onclick = function() { 
      tableText(this, i); 
     }; 
    } 
} 

（私はベストプラクティスのために他の変数を変更しましたが、それは本当に必要はありません。）

あなたはES6を使用できない場合のことができます。

for (var i = 0; i < table.rows.length; i++) { 
    for (var j = 0; j < table.rows[i].cells.length; j++) { 
     table.rows[i].cells[j].onclick = (function (i) { 
      return function() { 
       tableText(this, i); 
      }; 
     })(i); 
    } 
} 

このような自己実行機能に戻ってください。

も参照してください：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let#Cleaner_code_in_inner_functions

Answer 2

を深くそれに入るがなければ、私はあなたがalertに間違った番号を取得しているように一緒にinnerHTMLとiを評価alertコール、と思われます。

私も変更します

tableText(this, i); 

を明示的にだけですべての可能な混乱を避けるために

tableText(table.rows[i].cells[j], i); 

を言うこと。 thisはjavascript/htmlファイル自体に評価されている可能性があります