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

Change Row Color based on td value using Jquery

提问by John

I have a table that gets populated from a database. I have 2 conditions that i need to apply

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

1. Apply Zebra striping to the Table (Completed)
2. Change Row color to red based td value

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');
});

I wanna change the row color based on the input value

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

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

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

Here is a fiddle of what I've done so far

这是我迄今为止所做的事情

Would appreciate the help.

将不胜感激的帮助。

采纳答案by Popnoodles

To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)

要更改 tr（您使用的是 v 1.6.4 而不是最新的，所以我们需要绑定而不是打开）

$(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;
}

Your HTML is a bit messed up though. You have missing quotes and <td class>is invalid.

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

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

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

EDIT: Updated version to suit the values being changed manually, not just those that are outputted (as I understood the question to be)

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

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

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

You'll see I moved the background colours out of the HTML and into the CSS to make it easier to manipulate. I also adjusted the red for even or odd rows.

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

回答by Adil

Try this,

尝试这个，

Live Demo

现场演示

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

Edit: Based on comments and change in OP

编辑：基于 OP 中的评论和更改

To change the whole row with the given criteria of tdyou can do it this way.

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

Live Demo

现场演示

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