Question

我有一张表，我必须强调负值。所以我尝试使用jQuery并没有得到我的欲望输出。假设我有一张这样的表。

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

我正在使用jQuery。但它不起作用。

$(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');
});

Answer 1

试

$(document).ready(function() {

   $( ".status" ).each(function(){
       var value = parseInt( $( this ).html() );
       if ( value < 0 )
       {
           $( this ).parent().css('background-color', 'red');
       }
   });
});

Answer 2

您也可以按照以下方式执行此操作。

正如您所说的数字为负数，那么您也可以检查html中的-符号。

$('tr.alt td:contains("-")').parent('tr').css('background-color', '#cd0000');

Answer 3

您可以在jQuery中使用filter()函数

JSFiddle

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

$(document).ready(function() {
   $( ".status" )
      .filter(function(){
         return $(this).html() < 0;
      })
      .parent().css('background-color', 'red');
});

Answer 4

你的选择器有问题..

试试这个

 $(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');
     } 
  }) 

});

或使用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');

Answer 5

试试这个

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

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

DEMO

Answer 6

我认为发布的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>

然后，我会将样式移动到样式表（它使一切更容易管理）：

tr.alt:nth-child(even) {
    background-color: #f0f8ff;
}
tr.alt:nth-child(odd) {
    background-color: #fcfceb;
}
tr.alt.bad {
    background-color: #cd0000;
}

然后，虽然您可以查询行并迭代结果，但选择器不会那样工作。此外，.val（）用于表单字段;你想要.text（）。

$(document).ready(function() {
    $('.status').each(function() {
        var $this = $(this);
        if (Number($this.text()) < 0)
            $this.parent().addClass('bad');
    });
});

您可以在此处查看此操作：http://jsfiddle.net/MBDKY/

如果行值为负，则更改行颜色

6 个答案: