根据单元格中的百分比更改 <td> 背景，并将“%”添加到数字答案

【问题标题】：Change <td> background based on percentage in cell, as well as add '%' to number根据单元格中的百分比更改 <td> 背景，并将“%”添加到数字
【发布时间】：2012-03-19 11:34:25
【问题描述】：

这里有一些简单的名声。

场景

我有一个使用 JSP 动态构建的表。有几个<td> 在单元格中有一个代表百分比的数字。有关示例，请参阅this fiddle。我需要根据单元格中表示的百分比更改单元格的背景颜色。例如：

value < 50 = Red
value >= 50 & < 90 = Yellow
value >= 90 = Green

此外，我需要在单元格内容后附加“%”符号。例如：

90 = 90%

问题

如何根据单元格的内容添加背景颜色，并在其中添加文本？

我有一些 jQuery 将用于此，但它根本不起作用。这也在the fiddle 中。我也希望它尽可能精简。如果这可以在几行中完成，那就太好了。 如果可以纯粹用 CSS 就更好了，但我认为这是不可能的。

代码

（如果你不喜欢点击链接）

CSS

.red {
    background-color: #f99;
}
.yellow {
    background-color: #ff9;
}
.green {
    background-color: #9f9;
}
.notApplicable {
    background-color: #fff;
}
td.stopGapCondition {
    text-align: center;
}

jQuery

if ($('.stopGapCondition').text() < 50) {
    $('td .stopGapCondition').addClass('red');
}
if ($('.stopGapCondition').text() >= 50 && $('.stopGapCondition').text() < 90) {
    $('td .stopGapCondition').addClass('yellow');
}
if ($('.stopGapCondition').text() >= 90) {
    $('td .stopGapCondition').addClass('green');
}

HTML

<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
  </head>
  <body>
    <table class="content bordered" border="3" cellspacing="2" cellpadding="3" valign="top">
      <tbody>
        <tr>
          <th class="stopGapTH" colspan="4">
            Patient List
          </th>
          <th class="stopGapTH" colspan="99">
            Clinical Adherence Information
          </th>
        </tr>
        <tr height="30">
          <th align="middle">
            Patient Name
          </th>
          <th align="middle">
            DOB
          </th>
          <th align="middle">
            Primary Disease
          </th>
          <th align="middle">
            Risk Index
          </th>
          <th>
            Athsma
          </th>
          <th>
            COPD
          </th>
          <th>
            Diabetes
          </th>
          <th>
            Heart Disease
          </th>
        </tr>
        <tr>
          <td>
            Louis Armstrong
          </td>
          <td>
            Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition">
            50
          </td>
          <td class="stopGapCondition">
            80
          </td>
          <td class="stopGapCondition">
            75
          </td>
          <td class="stopGapCondition">
            90
          </td>
        </tr>
        <tr>
          <td>
            Bob Barker
          </td>
          <td>
            Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition red">
            49
          </td>
          <td class="stopGapCondition yellow">
            50
          </td>
          <td class="stopGapCondition yellow">
            89
          </td>
          <td class="stopGapCondition green">
            90
          </td>
        </tr>
        <tr>
          <td>
            David Brinkley
          </td>
          <td>
            1Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Tom Brokaw
          </td>
          <td>
            10Blah4
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad2 Sandy
          </td>
          <td>
            01Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad3 Sandy
          </td>
          <td>
            0Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad4 Sandy
          </td>
          <td>
            Blah5
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad5 Sandy
          </td>
          <td>
            01Blah5
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Alex Trebek
          </td>
          <td>
            1Blah1
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Chucka Woolerya
          </td>
          <td>
            10Blah51
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

编辑：另外，我忘了提到，如果它不包含数字，这意味着它可能包含“na”或“n/a”或“不适用”，它应该是白色的。我添加了css，但忘记在问题中提及它。

【问题讨论】：

你可以用 css 添加 % - td.stopGapCondition:after { content:"%"; }，不是一个 JQuery 程序员，所以不能帮助那个位

标签： jquery html css html-table

【解决方案1】：

需要使用.each来迭代结果；你不能同时对它们应用一个操作。

$('.stopGapCondition').each(function() {
    var $this = $(this);
    var value = $this.text();

    if(!/^\s*\d+(\.\d+)?\s*$/.test(value)) {
        $this.addClass('notApplicable');
        return;
    }

    if(value < 50) {
        $this.addClass('red');
    } else if(value < 90) {
        $this.addClass('yellow');
    } else {
        $this.addClass('green');
    }

    $this.text($this.text() + '%');
});

Here's a demo.

【讨论】：

@thepriebe：实际上，我没有收到您的最新消息：P 我现在收到了。
@minitech 奇怪的是，您最近的更新似乎不起作用。它只是所有的白色不是。我认为它在某种程度上默认了 .notApplicable 类。
@thepriebe：确实没有，我忘了考虑空格。它真的现在可以工作了:)

【解决方案2】：

下面的代码有帮助吗？您可以使用 stopGapCondition 类遍历 td

 $("table td.stopGapCondition").each(function(e){


    if ($(this).text() < 50) {

        $(this).addClass('red');
    }
    if ($(this).text() >= 50 && $(this).text() < 90) {

        $(this).addClass('yellow');
    }
    if ($(this).text() >= 90) {

        $(this).addClass('green');
    }

});

【讨论】：

【解决方案3】：

这应该可以工作：http://jsfiddle.net/R3AUh/10/

【讨论】：

【解决方案4】：

$('.stopGapCondition').each(function(){
    var $cell= $(this), val=parseInt( $cell.text())|| null, color='notApplicable';
    color=(val && val<50) ? 'red': (( val>=50 && val <=90)? 'yellow': (( val>90)? 'green': 'notApplicable'));    
    $cell.addClass(color); 
    if(val) $cell.text( val +' %');   
});

http://jsfiddle.net/R3AUh/18/

【讨论】：

这真的很漂亮...它没有添加“%”，但我喜欢 if 语句的简写。太棒了。
+1 用于使用 parseInt，尽管您确实应该使用它 using a radix：val = parseInt($cell.text(), 10)

【解决方案5】：

http://jsfiddle.net/R3AUh/19/

$('.stopGapCondition').each(function() {

    switch(true) {
        case ($(this).text() < 50 && $(this).text() !== ''):
            $(this).addClass('red');
            break;
        case ($(this).text() >= 50 && $(this).text() < 90):
            $(this).addClass('yellow');
            break;
        case ($(this).text() >= 90):
            $(this).addClass('green');
            break;
    }
});

【讨论】：