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>的{{1}}值作为单独的变量？我尝试使用以下代码片段，但它没有帮助

<tr>

Answer 1

我认为您说要在td被点击的任何内容中获取tr元素的每个值。

您可以使用find，map和get执行此操作以获取值数组：

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

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

Answer 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/

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

$('#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();
})

获得点击的价值

3 个答案: