Question

我有下表：

<table class="grid">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>Project 1</td>
            <td>Closed</td>
        <tr>
        <tr>
            <td>Project 2</td>
            <td>Open</td>
        <tr>
        <tr>
            <td>Project 3</td>
            <td>Closed</td>
        <tr>
    </tbody>
</table>

我正在尝试将我以前在代码隐藏中执行的一些UI代码移动到jQuery。每当Status（Column 2）列的值为Open时，我想更改TR元素的类。

使用jQuery执行此操作的最佳方法是什么？

Answer 1

$('tbody > tr', 'table.grid').filter(function() {
    return $(this).children('td').eq(1).text() == 'Open';
}).addClass('open_tr');

它在做什么：

它正在选择<tr>上下文的<tbody>内的所有table.grid元素。过滤器功能允许您根据返回的内容过滤元素，要么保持为true，要么丢弃为false。所以在过滤器中我们得到tr的所有子项，得到第二个<td>，并返回它的文本是否等于'打开' - 如果是，它将返回true，我们可以保留选择器中的父<tr>。剩下的就是<tr>的Open状态，所以我们可以添加一个类来标记它们。

Answer 2

我没有编写任何代码，因为你可以重复使用一些jQuery脚本，它们允许你为表行生成替代颜色 - 稍作修改。

基本上，在页面加载时（以jQuery术语 - 文档就绪）

获取对表格行的引用。
遍历行，检查特定列的值。
如果符合您的要求，请更改行颜色。

如何使用jQuery基于单元格内容设置表的行类？

2 个答案: