JQuery:如何从表中选择行

时间:2010-08-27 14:39:40

标签: jquery jquery-selectors

我有一个场景,我想根据td

中的值从表中选择行

e.g。我有这样一张桌子

<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

在momemnt我正在做这样的事情

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

循环遍历每一行并检查。这很冗长。有没有更好的方法来实现这一目标。我似乎无法用选择器找出AND运算符逻辑?

等待,

3 个答案:

答案 0 :(得分:6)

$("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/

答案 1 :(得分:3)

这是一个应该有效的选择器:

试一试: 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”会给出两场比赛。

答案 2 :(得分:1)

您可以使用HTMLTableRowElement上的native DOM cells property直接访问单元格,而不是在环形交叉路口发送jQuery,列出所有后代单元格,并选择非标准:eq选择器。

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

虽然它可能不会产生严重的性能差异。另一种方法是简单地维护包含预先修剪数据的数组数组,以便甚至可以节省DOM。