个人中心
gpt4 book ai didi

jquery - 根据单元格中的百分比更改 背景，并将 '%' 添加到数字

转载 作者：行者123 更新时间：2023-11-28 04:13:58 25 4
gpt4 key购买 nike

这里有一些简单的声望。

场景

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

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

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

90 = 90%

问题

How do I add a background-color based on the contents of the cell, and append text to it as well?

我有一些 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 但忘了在问题中提及它。

最佳答案

需要使用.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.

关于jquery - 根据单元格中的百分比更改 <td> 背景，并将 '%' 添加到数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9508325/

25 4 0
文章推荐： Jquery - 提交功能中的表单数据
文章推荐： html - 水平线上的按钮没有 float :Left
文章推荐： html - 为什么我的网页变成蓝色
文章推荐： javascript - React 应用程序中的 Vega-tooltip
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com