如果行值為負，則更改行顏色

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>

演示

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/