0

テーブルがあるとしましょう

<table id="data-table" id="test">
    <thead>
        <tr>
            <th>value1</th>
            <th>value2</th>
            <th>value3</th>
            <th>value4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="class1"><%= value.valueOne() %></td>
            <td id="class2"><%= value.valueTwo() %></td>
            <td id="class3"><%= value.valueThree() %></td>
            <td id="class4"><%= value.valueFour() %></td>
        </tr>
        <%
        }
        %>
    </tbody>
</table>

特定の変数がクリック されたときに、個別の変数として<td>値を取得するにはどうすればよいですか? 次のコード スニペットを使用してみましたが、役に立ちません<tr><tr>

$(this).closest('td').closest('tr').html()
4

3 に答える 3

2

メソッドを使用して、クリック イベントをにonデリゲートできます。tr#data-table

次に、$(this).find('td')現在クリックされている要素内のすべての td 要素を取得し、それらの内部コンテンツを配列にマップするために使用できます。

$('#data-table').on('click', 'tr', function() {
    var values = $(this).find('td').map(function() {
        return $(this).text();
    });

    alert(values[0]); // first td
    alert(values[1]); // second td
    alert(values[2]); // third td
    alert(values[3]); // fourth td
});

フィドル: http://jsfiddle.net/cPpzY/

たとえば、最初の2つのセルだけを選択したい場合、セルをさまざまな変数に保存することもできます。

$('#data-table').on('click', 'tr', function() {
    var first = $(this).find('td:eq(0)').text();
    var second = $(this).find('td:eq(1)').text();

    alert(first);
    alert(second);
});

この場合、:eq()セレクターを使用して特定のインデックスで要素を選択しています。

フィドル: http://jsfiddle.net/cPpzY/1/

于 2013-11-06T15:38:46.983 に答える
0

テンプレート エンジンを使用してtr要素のリストを生成しているようです。その場合、要素の ID は一意である必要があるため、class代わりに属性を使用する必要があります。id

        <td class="class1"><%= value.valueOne() %></td>
        <td class="class2"><%= value.valueTwo() %></td>
        <td class="class3"><%= value.valueThree() %></td>
        <td class="class4"><%= value.valueFour() %></td>

次に、行をクリックします

$('tr').click(function(){
    var v1 = $(this).find('.class1').text();
    var v2 = $(this).find('.class2').text();
    var v3 = $(this).find('.class3').text();
    var v4 = $(this).find('.class4').text();
})
于 2013-11-06T15:39:14.783 に答える