I have a table that gets populated from a database. I have 2 conditions that i need to apply
我有一个从数据库中填充的表。我有两个条件需要申请
- Apply Zebra striping to the Table (Completed)
- 在表格上应用斑马条纹(完成)
- Change Row color to red based td value
- 将行颜色更改为基于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类= "地位" > < input type = "文本" value = " 1 " > < / td >
Here is a fiddle of what I've done so far
这是我迄今为止所做的一件事。
Would appreciate the help.
欣赏会有所帮助。
2 个解决方案
#1
3
To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)
要更改tr(您使用的是v1.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;
}
Your HTML is a bit messed up though. You have missing quotes and <td class>
is invalid.
你的HTML有点混乱。您丢失了引号,并且
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中,以便更容易操作。我还调整了偶数或奇数行的红色。
#2
7
Try this,
试试这个,
现场演示
$('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 td
you can do it this way.
要用指定的td标准来改变整行,你可以这样做。
现场演示
$('td.status[value=Zero]').closest('tr').css('background-color', 'red');
#1
3
To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)
要更改tr(您使用的是v1.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;
}
Your HTML is a bit messed up though. You have missing quotes and <td class>
is invalid.
你的HTML有点混乱。您丢失了引号,并且
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中,以便更容易操作。我还调整了偶数或奇数行的红色。
#2
7
Try this,
试试这个,
现场演示
$('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 td
you can do it this way.
要用指定的td标准来改变整行,你可以这样做。
现场演示
$('td.status[value=Zero]').closest('tr').css('background-color', 'red');