用 td 中的特定内容突出显示 jQuery 中的一行答案

【问题标题】：Highliting a row in jQuery with specific content in a td用 td 中的特定内容突出显示 jQuery 中的一行
【发布时间】：2011-12-24 00:50:29
【问题描述】：

到目前为止，我可以让我的代码突出显示特定的 td，但更好的是突出整个行。有谁知道怎么做？

var mySearch = 'No';
$('table tbody tr td:contains("' + mySearch + '")').filter
(function(){
if($.trim($(this).text()) == mySearch)
    $(this).addClass("prequal-status-n");       
});

【问题讨论】：

你还不如丢失选择器的:contains 位。它会显着降低您的代码速度，因为它是一个 jQuery 扩展，因此会禁用浏览器的本机 (querySelectorAll) 功能。由于您稍后会进行== mySearch 测试，因此您根本不需要:contains 调用。

标签： jquery html-table tablerow

【解决方案1】：

通过将$(this).addClass("prequal-status-n") 更改为$(this).closest('tr').addClass("prequal-status-n")，您可以选择整行，而不仅仅是行中的一个单元格。

这是一个使用.closest() 选择单元格的tr 父标签的jsfiddle：http://jsfiddle.net/jasper/LhbUG/

注意：.closest('tr') 可以替换为.parent()，因为td 标记的直接父级是tr 标记。请记住，使用.parent() 会将您的$(this) 选择器限制为tr 标记的直接后代。

这里有一些文档供你参考：

.parent(): http://api.jquery.com/parent
.closest(): http://api.jquery.com/closest

【讨论】：

在这种情况下，我会使用 parent()，我认为不需要最接近的()

【解决方案2】：

您可以使用 closparentest() 并找到 tr

var mySearch = 'No';
$('table tbody tr td:contains("' + mySearch + '")').filter
(function(){
if($.trim($(this).text()) == mySearch)
    $(this).parent().addClass("prequal-status-n");       
})

【讨论】：

【解决方案3】：

试试

var mySearch = 'No';
$('table tbody tr td:contains("' + mySearch + '")')
                   .parent("tr").addClass("prequal-status-n");

【讨论】：

【解决方案4】：

您想使用closest 方法选择包含<td> 的<tr>：

$(this).closest("tr").addClass(...);

来自closest 的 API 文档：

获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。

【讨论】：

【解决方案5】：

试试这样的：

$("td:contains('" + mySearch + "')").closest("tr").toggleClass("prequal-status-n");

【讨论】：