使用Jquery根据td值更改行颜色 [英] Change Row Color based on td value using Jquery

问题描述

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

1. 在表格中应用斑马条纹（已完成）


2. 将行颜色更改为红色td值

`

 < tr class =alt> 
< td class =status>< input type =textvalue =One>< / td> 
< td class>收到< / td> 
< / tr> 
< tr class =alt> 
< td class =status>< input type =textvalue =One>< / td> 
< td class>收到< / td> 
< / tr> 
< tr class =alt> 
< td class =status>< input type =textvalue =Zero>< / td> 
< td class>收到< / td> 
< / tr> 
< tr class =alt> 
< td class =status>< input type =textvalue =One>< / td> 
< td class>收到< / td> 
< / tr> 
< tr class =alt> 
< td class =status>< input type =textvalue =Zero>< / td> 
< td class>收到< / 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 =textvalue =One>< / td> p>

这是我迄今为止所做的一件小事

感谢您的帮助。 要更改 tr（你使用v 1.6.4而不是最新的，所以我们需要绑定而不是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'）; //触发器在加载
时运行这个动作}）; 
 
 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> 无效。 $ b

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

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

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

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

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

​`

<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>

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

Would appreciate the help.

解决方案

To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of 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;
}

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

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/

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.

这篇关于使用Jquery根据td值更改行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！