Question

我有一个计数列和一个目标列

我想写一个if语句：如果计数小于目标值的10％（使单元格变黄）如果计数超过目标的10％（使单元格为红色）如果count是＆lt;目标（使细胞变绿）如果计数=目标（使单元格为绿色）

下面是我的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

$('#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 2

查看小提琴：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 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"); 
        }
    });
});

JQuery根据表值更改颜色

3 个答案: