JQuery：如何从表中选择行答案

【问题标题】：JQuery: How to select rows from a tableJQuery：如何从表中选择行
【发布时间】：2010-08-27 14:39:40
【问题描述】：

我有一个场景，我想根据 td 中的值从表中选择行

例如我有一张这样的桌子

<tr>
   <td>John</td>
   <td>Smith</td>
   <td>Male</td>
</tr>
<tr>
   <td>Andy</td>
   <td>Gates</td>
   <td>Male</td>
</tr>
<tr>
   <td>Alice</td>
   <td>Nixon</td>
   <td>Female</td>
</tr>

现在如果第一个 td 的值为 x AND 第二个 td 的值为 y，我想选择所有行

目前我正在做这样的事情

$("tr").each(function (index) {
   if ($(this).find('td:eq(0)').text().trim() == x &&
       $(this).find('td:eq(1)').text().trim() == y)
          ...do somethin....
});

遍历每一行并检查。这是冗长的。有没有更好的方法可以在一行中实现这一点。我似乎无法用选择器弄清楚 AND 运算符逻辑？

等待，

【问题讨论】：

离题：只是提醒一下.trim() 在某些浏览器中会失败。
那有什么选择呢？

标签： jquery jquery-selectors

【解决方案1】：

$("tr").each(function (index) {
   if ($.trim($(this).find('td:eq(0)').text()) == x &&
       $.trim($(this).find('td:eq(1)').text()) == y) {
       $(this).closest('table').css('border', '1px solid red'); // this should do it
   }
});

或者，使用.filter:

$("tr").filter(function() {
    return $.trim($(this).find('td:eq(0)').text()) == 'John' &&
           $.trim($(this).find('td:eq(1)').text()) == 'Smith';
}).closest('table').find('tr').css('border', '1px solid red');

演示：http://jsfiddle.net/WhFbE/5/

【讨论】：

【解决方案2】：

这是一个应该可以工作的选择器：

试试看：http://jsfiddle.net/N6TdM/

var x = "Andy";
var y = "Gates";

var res = $("td:first-child:contains(" + x + ") + td:contains(" + y + ")");

请注意，如果您遇到类似以下情况，这可能会失败：

FIRST:   Roberto       Rob
SECOND:  Robertson     Roberts

搜索“Rob Roberts”会得到两个匹配项。

【讨论】：

【解决方案3】：

您可以使用 HTMLTableRowElement 上的 native DOM cells property 直接访问单元格，而不是通过列出所有后代单元格并使用非标准的 :eq 选择器来循环发送 jQuery。

$('tr').each(function (index) {
    if (
        $(this.cells[0]).text().trim()===x &&
        $(this.cells[1]).text().trim()===y
    ) {
        ...
    }
});

虽然它可能不会产生严重的性能差异。另一种方法是简单地维护一个包含预先修剪的数据的数组数组，以便即使查看 DOM 也可以保存。

【讨论】：