1

我有一张表，我必须在其中突出显示负值。所以我尝试使用 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');
});
4

6 回答 6

5

尝试

$(document).ready(function() {

   $( ".status" ).each(function(){
       var value = parseInt( $( this ).html() );
       if ( value < 0 )
       {
           $( this ).parent().css('background-color', 'red');
       }
   });
});
于 2013-04-24T05:43:50.433 回答
2

您也可以按以下方式进行。

正如你所说的数字变为负数，那么你也可以检查-登录 html。

$('tr.alt td:contains("-")').parent('tr').css('background-color', '#cd0000');
于 2013-04-24T05:48:13.147 回答
2

您可以在 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');
});
于 2013-04-24T05:50:26.113 回答
1

你的选择器有问题..

试试这个

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

});

或使用过滤器（）

 $(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');
于 2013-04-24T05:49:05.803 回答
1

试试这个

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>

演示

于 2013-04-24T05:57:07.953 回答
0

我假设发布的 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/

于 2013-04-24T05:54:35.007 回答