获得价值 <tr> 在一个 <td> 点击

Question

可以说我有一张桌子

<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() 

Answer 1

我想您是说您想在单击的任何tr中获取td元素的每个值。

您可以使用find ， map和get来获取值数组：

$('#test tbody tr').click(function() {
    var values = $(this).find('td').map(function() {
        return $(this).text();
    }).get();
});

jsFiddle （注意，我已经删除了table元素上的一个id值：您不能有两个...）

Answer 2

您可以使用on方法将tr上的click事件委托给#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/

您还可以将单元格存储在不同的变量中，假设您只想选择前两个单元格，例如：

$('#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/

Answer 3

看起来您正在使用模板引擎生成tr元素列表，在这种情况下，您需要使用class属性而不是id因为元素的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();
})