使用html n css的背景颜色

Question

我试图遍历一个表以获取每个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>

上面是我的代码..我需要如下更改第二列的背景颜色。 如果第二列元素的值<= 10，则颜色为绿色，黄色为11-20，红色为21以上。 我在这里给出了示例代码。 实际上，表是从数据库派生的，即可能有任意行。 所以我需要在页面加载时为列着色。 任何帮助表示赞赏，谢谢。

Answer 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>

Answer 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。

Answer 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>的唯一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>

如果总是需要颜色的中间单元格，则可以完全删除id并依靠“始终是中间单元格”这一事实。 例如，使用以下选择器代替：

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

唯一的限制是querySelectorAll是IE <9不支持它。 所有其他浏览器都支持它。

由于需要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>

查看有关:nth-child如何工作的示例。

无id解决方案的演示 （如果要着色的单元格始终是中间的单元格）。

由于OP卡在IE8上并且IE8不支持:nth-child ，因此可以使用另一个相邻的同级组合器来定位^第二个孩子，但要注意的是只能有3个<td>并且^第三个孩子不能包含任何数字。

更新：

根据需要在IE8工作，增加的实际需求background-color至^第 6列，这里是一个简单（读）和更多的跨浏览器兼容的jQuery的解决方案：

jsBin演示 （因此可在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';
        }
    }
});

Answer 4

这是您想要的：此处演示 </>

 <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>

Java脚本

$(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';
            }
        }

    });

使用html n css的背景颜色

问题描述

4 个解决方案

解决方案1
1 2013-05-24 07:34:54

解决方案2
1 2013-05-24 07:36:00

解决方案3
1 已采纳 2013-05-24 07:37:20

解决方案4
0 2013-05-24 07:57:23

使用html n css的背景颜色

问题描述

4 个解决方案

解决方案1 1 2013-05-24 07:34:54

解决方案2 1 2013-05-24 07:36:00

解决方案3 1 已采纳 2013-05-24 07:37:20

解决方案4 0 2013-05-24 07:57:23

解决方案1
1 2013-05-24 07:34:54

解决方案2
1 2013-05-24 07:36:00

解决方案3
1 已采纳 2013-05-24 07:37:20

解决方案4
0 2013-05-24 07:57:23