[英]change row color if row value is negative
I have a table where I have to highlight negative values. 我有一张桌子,我必须突出显示负值。 So I tried using jQuery and did not get my desire output.
因此,我尝试使用jQuery,但没有得到我的期望输出。 Lets suppose I have a table like this.
假设我有一个这样的表。
<table border="1" cellpadding="4" cellspacing="4">
<tr class="alt">
<td class="status">1</div>
<td class>Received</div>
</tr>
<tr class="alt">
<td class="status">-50</div>
<td class>Received</div>
</tr>
<tr class="alt">
<td class="status">0</div>
<td class>Received</div>
</tr>
<tr class="alt">
<td class="status">20</div>
<td class>Received</div>
</tr>
</table>
I'm using jQuery. 我正在使用jQuery。 But its not working.
但是它不起作用。
$(document).ready(function(){
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
});
$(document).ready(function() {
$(.status.val()<0).closest('tr.alt').css('background-color', '#cd0000');
$(td.status[value<0]).css('background-color', 'red');
});
try 尝试
$(document).ready(function() {
$( ".status" ).each(function(){
var value = parseInt( $( this ).html() );
if ( value < 0 )
{
$( this ).parent().css('background-color', 'red');
}
});
});
You can also do it as below. 您也可以按照以下步骤进行操作。
As you said number goes negative then you can also check for -
sign in html. 正如您所说的数字为负数,那么您还可以检查
-
登录html。
$('tr.alt td:contains("-")').parent('tr').css('background-color', '#cd0000');
You can use the filter() function in jQuery 您可以在jQuery中使用filter()函数
HTML 的HTML
<table border="1" cellpadding="4" cellspacing="4">
<tr class="alt">
<td class="status">1</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">-50</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">0</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">20</td>
<td class>Received</td>
</tr>
</table>
jQuery jQuery的
$(document).ready(function() {
$( ".status" )
.filter(function(){
return $(this).html() < 0;
})
.parent().css('background-color', 'red');
});
you have a problem in you selector.. 您的选择器有问题。
try this 尝试这个
$(document).ready(function()
{
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
$('.status').each(function(){
var $this =$(this);
if($this.text() < 0){
$this.parent().css('background-color', '#cd0000');
$this.css('background-color', 'red');
}
})
});
or using filter() 或使用filter()
$(document).ready(function()
{
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
$( ".status" ).filter(function(){
return $(this).text() < 0;
}).css('background-color', 'red').parent().css('background-color', '#cd0000');
Try this 尝试这个
JS JS
$(document).ready(function()
{
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
$("td" ).each(function() {
if(parseInt($(this).text())<0)
{
$(this).parent().css('background-color', '#cd0000');
$(this).css("background-color", "red");
}
});
});
HTML 的HTML
<table border="1" cellpadding="4" cellspacing="4">
<tr class="alt">
<td class="status">1</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">-50</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">0</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">20</td>
<td class>Received</td>
</tr>
</table>
I'm assuming the HTML posted is off the top of your head? 我假设发布的HTML不在您的脑海中? Because you have a lot of mismatched tags there.
因为那里有很多不匹配的标签。 Fixed:
固定:
<table border="1" cellpadding="4" cellspacing="4">
<tr class="alt">
<td class="status">1</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">-50</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">0</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">20</td>
<td class>Received</td>
</tr>
</table>
Then, I would move styles to a stylesheet (it makes everything easier to manage): 然后,我将样式移到样式表(这使所有内容都更易于管理):
tr.alt:nth-child(even) {
background-color: #f0f8ff;
}
tr.alt:nth-child(odd) {
background-color: #fcfceb;
}
tr.alt.bad {
background-color: #cd0000;
}
Then, selectors don't quite work that way, though you can query the rows and iterate the result. 然后,选择器就不会那样工作,尽管您可以查询行并迭代结果。 Also, .val() is for form fields;
此外,.val()用于表单字段; you want .text().
你想要.text()。
$(document).ready(function() {
$('.status').each(function() {
var $this = $(this);
if (Number($this.text()) < 0)
$this.parent().addClass('bad');
});
});
You can see this in action here: http://jsfiddle.net/MBDKY/ 您可以在这里看到实际效果: http : //jsfiddle.net/MBDKY/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.