6

データベースからデータが取り込まれるテーブルがあります。応募する条件が2つある

  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>

ここに私がこれまでに行ったことのフィドルがあります

助けていただければ幸いです。

4

2 に答える 2

8

これを試して、

ライブデモ

$('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');
于 2012-11-25T02:02:20.183 に答える
3

tr を変更するには (最新ではなく v 1.6.4 を使用しているため、on ではなく bind が必要です)

$(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/

EDIT：出力されたものだけでなく、手動で変更された値に合わせて更新されたバージョン（私が質問を理解したように）

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

操作しやすくするために、背景色を HTML から CSS に移動したことがわかります。また、偶数行または奇数行の赤を調整しました。

于 2012-11-25T02:28:42.880 に答える