使用 html 和 css 的背景颜色答案

【问题标题】：background color using html n css使用 html 和 css 的背景颜色
【发布时间】：2013-05-19 17:46:48
【问题描述】：

我正在尝试遍历一个表以获取每个 TD 值。如果该值低于特定数字，那么我会做一些事情。

     </head>
     <body>
     <table id="tableData" name="tableData">
     <tr>
     <td>abc</td>
     <td>5</td>
     <td>abcd</td>
     </tr>
     <tr>
     <td>aaaa</td>
     <td>15</td>
     <td>bbbb</td>
     </tr>
     <tr>
     <td>ccc</td>
     <td>25</td>
     <td>dddd</td>
     </tr>
     </table>
     </body>

上面是我的代码..我需要更改第二列的背景颜色，如下所示。如果第二列元素的值为

【问题讨论】：

但是你真正的code...在哪里？
ID 应该是唯一的。
感谢更新问题。您能否将id="xxx" 更改为更具代表性的值？正如@Zenith 所说，id 值必须是唯一的。如果这些是您实际的ids，那么这就是您的问题。
谢谢！！！那么我应该根据需要为该特定列着色吗？

标签： javascript jquery html css iteration

【解决方案1】：

首先，不要对页面上的任何元素使用相同的 ID。它是唯一标识符。如果要引用多个元素，请改用类。

实现您想要的最简单的方法是使用两个类 - 一个定义 xxx，然后一个定义其状态（颜色）。此外，如果您使用语义命名（而不是 .green、.yellow、.red），您将更好地理解您的代码。

前

.xxx{ font-weight: bold;}
.less10 { background: green;}
.between1120 {background: yellow; }
.over21 { background: red; }

您不能根据元素内的内容设置 CSS。为此，您需要一些简单的 jQuery/javascript 或您选择的编程语言来遍历表中的所有 xxx 类，并相应地添加状态类。

前

<td class="xxx less10">5</td>
<td class="xxx between1120">15</td>
<td class="xxx over21">35</td>

【讨论】：

其实我没有得到你。我拿那个身份证。我会像下面这样 abc 5 abcd aaaa 15 bbbb ccc 25 dddd 什么shld 我为特定列着色。你知道表实际上包含很多值。它将从数据库中动态检索。所以我需要在页面自己加载时相应地着色。请帮忙

【解决方案2】：

首先您应该将 ID xxx 更改为 Class xxx。

 function checkForm(){
    $('td.xxx').each(function(){
        var val=parseInt($(this).text());
        if(val<=10) $(this).css({background:'green'});
        else if(val>10 && val<=20) $(this).css({background:'yellow'});
        else if(val>20) $(this).css({background:'red'});
    }
 }

我认为这应该适用于 jQuery。

【讨论】：

【解决方案3】：

以下修改后的纯 JavaScript 将根据需要为 <td> 元素着色：

function checkForm() {
    var tds = document.querySelectorAll('td[id]');

    for (var j = 0; j < tds.length; j++) {
        var i = tds[j].innerHTML;

        if(i < 10){
            tds[j].style.backgroundColor = 'green'; 
        } else if(i >= 11 && i <= 20){
            tds[j].style.backgroundColor = 'yellow'; 
        } else if(i > 20){
            tds[j].style.backgroundColor = 'red';
        }
    }
}

但您需要修改 HTML 以赋予 <td>s 唯一的 ID 值，例如

<body onload="checkForm();">
    <table id="tableData" name="tableData">
        <tr>
            <td>abc</td>
            <td id="a">5</td>
            <td>abcd</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td id="b">15</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>ccc</td>
            <td id="c">25</td>
            <td>dddd</td>
        </tr>
    </table>
</body>

如果总是需要颜色的中间单元格，您可以完全删除 ids 并依赖“始终是中间单元格”这一事实。例如，请改用以下选择器：

var tds = document.querySelectorAll('td:nth-child(2)');

唯一的限制是querySelectorAll 是IE

由于需要background-color 的单元格始终是第二个单元格，您可以使用CSS nth-child 选择器作为querySelectorAll() 中的参数来“选择父级的第二个<td> 子元素”，在这种情况下是<tr>。

所以td:nth-child(2) 找到了以下 HTML 的 <td>two</td> 元素：

<tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
</tr>

查看some examples 了解:nth-child 的工作原理。

Demo of id-less solution（如果要着色的单元格总是是中间那个）。

由于 OP 被 IE8 卡住并且 IE8 不支持 :nth-child，因此可以使用替代 adjacent sibling combinator 来定位第 2^nd 个子节点，但需要注意的是只能有 3 个 <td>并且第 3^rd 不能包含任何数字。

更新：

根据实际需要在IE8下工作的需求，将background-color添加到第6^th列，这里更简单（阅读）更多交叉-浏览器兼容的jQuery解决方案：

jsBin demo（所以它适用于 IE8）

HTML

从<body> 中删除onload="checkForm();

<table id="tableData" name="tableData">
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>abc</td>
        <td>5</td>
        <td>abcd</td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>aaaa</td>
        <td>15</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>ccc</td>
        <td>25</td>
        <td>dddd</td>
    </tr>
</table>

JavaScript

$(function(){
    var tds = $('td:nth-child(6)');

    for (var j = 0; j < tds.length; j++) {
        var i = tds[j].innerHTML;

        if(i < 10){
            tds[j].style.backgroundColor = 'green';
        } else if(i >= 11 && i <= 20){
            tds[j].style.backgroundColor = 'yellow';
        } else if(i > 20){
            tds[j].style.backgroundColor = 'red';
        }
    }
});

【讨论】：

我的演示不符合您的要求吗？它根据单元格的值为第二列着色。
嗨..我没有得到答案。如果我使用代码 var tds = document.querySelectorAll('td:nth-child(3)'); .
wat 是指我的 td:nth-child(3) 。你能解释清楚吗？
演示对您有用吗？我将更新我的答案以解释 CSS 选择器。
另外，您需要2nd 孩子，而不是3rd。所以它是td:nth-child(2) 而不是 td:nth-child(3)

【解决方案4】：

这是你想要的： Demo Here</>

 <table id="tableData" name="tableData">
    <tr>
        <td>
            abc
        </td>
        <td class="xxx">
            5
        </td>
        <td>
            abcd
        </td>
    </tr>
    <tr>
        <td>
            aaaa
        </td>
        <td class="xxx">
            15
        </td>
        <td>
            bbbb
        </td>
    </tr>
    <tr>
        <td>
            ccc
        </td>
        <td class="xxx">
            25
        </td>
        <td>
            dddd
        </td>
    </tr>
</table>

Javascript

$(document).ready(function () {
        var arr = $(".xxx").toArray();

        for (var i = 0; i < arr.length; i++) {

            if (parseInt(arr[i].innerText) < 10) {
                $(arr[i])[0].bgColor = "green";
            }

            else if (parseInt(arr[i].innerText) >= 11 && parseInt(arr[i].innerText) <= 20) {
                $(arr[i])[0].bgColor = 'yellow';
            }
            else if (parseInt(arr[i].innerText) > 20) {
                $(arr[i])[0].bgColor = 'red';
            }
        }

    });

【讨论】：

我不知道如何使用小提琴链接。单击它后我该怎么办。我没有看到任何代码。可能无法加载
是的，但我是这个博客的新手。今天只有我加入并发布了我的问题。如果你说如何投票，我一定会这样做:)
我的答案最左边有两个箭头符号。只需单击向上箭头。很简单。