テーブル行のIDを渡す

Question

次の質問は、ほとんどの人にとっては簡単な質問かもしれません。しかし、私はJavaScriptを始めたばかりです。誰かが私を正しい方向に向けることができたら本当に感謝しています。

私は、各行が独自のIDを持つ通常のHTMLテーブルを持っています。私が達成したいのは、行のリンクをクリックするたびに、その行のidを変数に格納し、後で関数に渡す必要があるということです。行＃1をクリックしてID＃1を渡すなどとしましょう...これをどのように達成できますか？

ありがとうございます。これは動作するはず

Answer 1

：

var currentRowID, table = document.getElementById('your-table'); 
var rows = table.rows; 
var row_count = rows.length; 

for(var i = 0; i < row_count; i++) { 
    rows[i].onclick = function() { 
     currentRowID = this.id; 
     //do something with currentRowID here... 
    }; 
} 

jsFiddle example

Answer 2

を使用すると、クリックに対応するイベントハンドラを手配するときは、要素がクリックされたかを把握できるように、ブラウザは、物事を設定します（イベントの "目標"）。

function handleRowClicks(e) { 
    e = e || window.event; 
    if (!e.target.tagName.toLowerCase() === "tr") return; 
    var rowId = e.target.id; 
    /* 
    whatever you want to do goes here 
    */ 
} 

// To set up the event handler, do this in your "window.onload" or some 
// other initialization point 

document.getElementsByTagName("table")[0].onclick = handleRowClicks; 

これが一つだけ異なるアプローチの束のである：あなたのJavaScriptでは、あなたの<table>は、ページ上の唯一のテーブルであると仮定すると、このような何かを行うことができます。 Javascriptフレームワーク/ライブラリを使用する場合は、多少単純になりますが、それほど簡単ではありません。

このアプローチでは、行自体ではなく<table>のレベルでクリックが処理されることに注意してください。これにより、少し初期化作業が省けます。他の例と同様に

Answer 3

は、ここにあなたが純粋なJavaScriptでこれを行うことができます方法は次のとおりです。私の意見では

// Pure JavaScript: 
var table = document.getElementById("table-one"); 
var rows = table.rows; 
var length = rows.length; 

for(var i = 0; i < length; i++) { 
    rows[i].onclick = function() { 
     alert(this.id); 
     // Do more stuff with this id. 
    } 
} 

は、この特定の問題がjQueryで非常にうまく解決しています。このような他の操作を実行している場合、jQueryは時間を節約し、コードの複雑さを抑えます。これで上記の比較：http://jsfiddle.net/andrewwhitaker/9HEQk/は

Answer 4

それを行うための最も簡単な方法は次のとおりです。

// jQuery: 
$("#table-one tr").bind("click", function() { 
    alert(this.id); 
}); 

bindがちょうどよく、ハンドラ:)

作業をサンプルにイベントをバインドするjQueryの方法であり、 jQueryフレームワークを使用します。

// Your function 
function MyFunc(rowId){ 
    alert(rowId); 
} 
// Binde click event to all rows with class "ClockableRow" 
// within table with class "clickableTable" 
$(".clickableTable .clickableRow").click(function(){ 
    // Call you function and pass clicked row ID there 
    MyFunc($(this).attr("id")); 
}) 

あなたのテーブルには、次のようになりshoul：

<table class="clickableTable"> 
    <tr id="row1" class="clickableRow"><td>row 1</td></tr> 
    <tr id="row2" class="clickableRow"><td>row 2</td></tr> 
    <tr id="row3" class="clickableRow"><td>row 3</td></tr> 
    <tr id="row4" class="clickableRow"><td>row 4</td></tr> 
    <tr id="row5" class="clickableRow"><td>row 5</td></tr> 
</table> 

example