使用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更改整row with the given criteria of td您可以這樣做。

現場演示

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

Answer 2

要更改tr（你使用的是v 1.6.4而不是最新的，所以我們需要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以使其更易於操作。 我還調整了偶數行或奇數行的紅色。