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>

单击特定变量时，如何将 a 的<td>值作为单独的变量获取？我尝试使用以下代码片段，但没有帮助<tr><tr>

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

3 回答 3

2

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

您可以使用 , 来执行此操作find，map并get获取一组值：

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

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

于 2013-11-06T15:38:04.983 回答
2

您可以使用该on方法将 click 事件委托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/

于 2013-11-06T15:38:46.983 回答
0

看起来您正在使用模板引擎生成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();
})
于 2013-11-06T15:39:14.783 回答