使用Jquery基于td值更改行颜色

Question

我有一个从数据库填充的表.我有2个条件需要申请

1. 将Zebra条纹应用于表格(已完成)
2. 将行颜色更改为基于红色的td值

`

<tr class="alt">
    <td class="status"><input type="text" value="One"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="One"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="Zero"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="One"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="Zero"></td>
    <td class>Received</td>
</tr>

`

$(document).ready(function()
{
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
});

$(document).ready(function() {
   $('.status.val():contains("Zero")').closest('tr.alt').css('background-color', '#cd0000');
});

我想根据输入值更改行颜色

<td class="status"><input type="text" value="One"></td>

这是我到目前为止所做的一个小提琴

很感激帮助.

Answer 1

试试这个,

现场演示

$('td.status[value=Zero]').css('background-color', 'red');

编辑:根据OP中的注释和更改

要改变整体,row with the given criteria of td你可以这样做.

现场演示

$('td.status[value=Zero]').closest('tr').css('background-color', 'red');

Answer 2

要更改 tr（您使用的是 v 1.6.4 而不是最新版本，因此我们需要绑定而不是 on）

\n\n

$(document).ready(function(){\n\n    $("tr.alt:even").addClass("even");\n    $("tr.alt:odd").addClass("odd");\n    $(\'td.status input\').bind(\'change keyup\', function(){\n        var tr=$(this).closest(\'tr\');\n\n        if ($(this).val()==\'Zero\') tr.addClass(\'zero\');       \n        else tr.removeClass(\'zero\');\n\n    }).trigger(\'change\'); // the trigger is to run this action on load\n});\n\xe2\x80\x8b\ntr.odd\n{\n    background-color:#fcfceb;\n}\n\ntr.even\n{\n    background-color:#f0f8ff;\n}\n\ntr.odd.zero\n{\n    background-color:#ff0000;\n}\ntr.even.zero\n{\n    background-color:#cc0000;\n}\n

\n\n

不过你的 HTML 有点混乱。您缺少引号并且<td class>无效。

\n\n

http://jsfiddle.net/MMEhc/158/

\n\n

编辑：更新版本以适应手动更改的值，而不仅仅是输出的值（据我理解问题是）

\n\n

http://jsfiddle.net/MMEhc/159/

\n\n

您会看到我将背景颜色从 HTML 移至 CSS 中，以使其更易于操作。我还调整了偶数行或奇数行的红色。

\n