上表中的值JQuery的改變顏色的基礎

Question

我有一個數列和目標列

我想寫一個if語句： 如果計數小於10％，比目標（使細胞黃色） 如果計數是在目標（使細胞紅色） 超過10％。如果計數<目標（使細胞綠色） 如果計數=目標（使細胞綠色）

下面是我的HTML。謝謝

<table id="ytdTable" border="1" style="width:100%"> 
    <tr class="trHeader trHeaderMain"> 
     <th colspan="3">Table1</th></tr> 
      <tr class="trHeader trHeaderSub"></tr> 
       <th>Name</th> 
       <th>Count</th> 
       <th>Target</th> 
    <tr><td>Name1</td> 
     <td>5</td> 
     <td>100</td> 
    </tr> 
    <tr><td>Name2</td> 
     <td>100</td> 
     <td>50</td> 
    </tr> 
    <tr><td>Name3</td> 
     <td>35</td> 
     <td>35</td> 
    </tr> 
    </tr> 
</table> 

Answer 1

看看小提琴：http://jsfiddle.net/2c48jpb1/5/。我建議在撥弄添加類細胞像當年加入這個jQuery代碼

$(document).ready(function(){ 
$('.item').each(function(){ 
    var countNum = $(this).find('.count').text(); 
    var targetNum = $(this).find('.target').text(); 
    var percent = (countNum/targetNum) * 100; 
    var diff = percent - 100; 

    if(diff <= 0){ 
     $(this).css('background','green'); 
    }else if (diff > 10){ 
     $(this).css('background','red'); 
    }else if (diff < 10 && diff > 1){ 
     $(this).css('background','yellow'); 
    } 

}); 

}); 

Answer 2

$('#ytdTable tr:gt(2)').each(function() { 
    var $cells = $(this).find('td'), 
     val = +$cells.eq(1).text(), 
     target = +$cells.eq(2).text(), 
     ratio = val/target, 
     color = 'green'; 
    if (ratio >= 1) { 
     color = ratio > 1.1 ? 'red' : 'yellow'; 
    } 
    $cells.eq(1).css('background', color) 

}); 

DEMO

Answer 3

這裏是你如何做到這一點：

http://jsfiddle.net/8L7v0pbp/

$(document).ready(function() { 
    $("#ytdTable td.count").each(function() { 
     var countValue = parseInt($(this).html()); 
     var targetValue = parseInt($(this).siblings(".target").html()); 

     if(countValue > targetValue) { 
      if(((countValue-targetValue)/targetValue)*100 < 10) { 
       $(this).css("background", "yellow");     
      } else { 
       $(this).css("background", "red"); 
      } 
     } else { 
      $(this).css("background", "green"); 
     } 
    }); 
});