jquery - 使用 Jquery 根据 td 值更改行颜色

Question

我有一个从数据库中填充的表。我有两个条件需要申请

1. 将斑马条纹应用于表格（已完成）
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 而不是 latest，所以我们需要 bind 而不是 on）

$(document).ready(function(){

    $("tr.alt:even").addClass("even");
    $("tr.alt:odd").addClass("odd");
    $('td.status input').bind('change keyup', function(){
        var tr=$(this).closest('tr');

        if ($(this).val()=='Zero') tr.addClass('zero');       
        else tr.removeClass('zero');

    }).trigger('change'); // the trigger is to run this action on load
});
​
tr.odd
{
    background-color:#fcfceb;
}

tr.even
{
    background-color:#f0f8ff;
}

tr.odd.zero
{
    background-color:#ff0000;
}
tr.even.zero
{
    background-color:#cc0000;
}

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

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

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

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

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