[英]Change Row Color based on td value using Jquery
我有一个从数据库填充的表。 我有2个条件需要申请
`
<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>
很感激帮助。
要更改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以使其更易于操作。 我还调整了偶数行或奇数行的红色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.