5

データベースから入力されたHTMLテーブルがあります。そして、すべてのテーブル行にクライアントクリックイベントを追加するjquery関数。

$(function() {
    $(".TreeTable tr").each(function(index) {
        $(this).click(function() {
            alert($(this).text());
        });
    });
});

これで、任意の行をクリックして完全な行の値を取得できます。次に、その関数の個々のセルの値にアクセスする必要があります。行クリックで個々のセルの値を取得する方法を教えてもらえますか？

4

5 に答える 5

8

これを見てください：

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

動作するコードは次のとおりです：http： //jsfiddle.net/VbA9D/

クリックする可能性のあるテーブルセル内に他のHTML要素がある場合は、以下の例の方が適切に機能します。

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        if(cell.nodeName != 'TD') 
            cell = $(cell).closest('td').get(0);
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

そして、ここにあなたがテストできるコードがあります：

http://jsfiddle.net/7PWu5/

于 2013-03-25T14:09:57.937 に答える
5

まず、必要はありません.each-.clickメソッドは、最初の要素だけでなく、渡されたすべての要素にバインドします。

cells次に、行のセルに直接アクセスできるようにする、テーブルの行要素で呼び出される特定のプロパティがあります。

$('.TreeTable').on('click', 'tr', function() {
    var td = this.cells[0];  // the first <td>
    alert( $(td).text() );
});

イベント委任の使用に注意してください。イベントハンドラーは実際にはテーブル全体に登録されており、イベントバブリングに依存して、クリックされた行を通知します（そしてそこからセルテキストを取得します）。

于 2013-03-25T13:15:24.740 に答える
1

を使用して2番目のセルを取得できます

 alert($('td', this).eq(1).text());

通常、より信頼性の高いコードを使用するには、目的のセルにクラスを追加して、使用できるようにすることをお勧めします。

 alert($('td.myclass', this).text());

クリックされたセルを取得したい場合は、イベントをセルにバインドするだけです。

$(".TreeTable  td").click(function() { // td not tr
     alert($(this).text());
});

私の最後のコードからわかるように、イベントをバインドするためにjQueryコレクションをループすることは無意味であることに注意してください。

于 2013-03-25T13:12:28.230 に答える
1

私はこれを好む：

$('.TreeTable').on('click', 'td', function() { // td not tr
     alert($(this).text());
});
于 2013-03-25T13:16:17.260 に答える
1

を使用してイベントハンドラーを要素のセットにバインドすることを明示的に繰り返す必要はありません.each()。イベントバインド関数が暗黙的にそれを行います。イベントの伝播により、イベントハンドラーをにバインドし、 （元の要素）を<tr>使用event.targetして、実際にクリックされた要素（）への参照を取得できます<td>。

$(function() {
    $('.TreeTable tr').click(function(event) {
        console.log(this); // the <tr>
        console.log(event.target); // the <td>
    });
});

<td>これは、クリックされた特定の要素に関心があることを前提としています。

于 2013-03-25T13:16:52.670 に答える