使用html n css的背景颜色

Question

I'm trying to loop through a table to get each TD value. 我试图遍历一个表以获取每个TD值。 If the value is below a specific number then I'll do something. 如果该值低于特定数字，那么我会做些事情。

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

above is my code .. i need to change the background colors of the 2nd column as below . 上面是我的代码..我需要如下更改第二列的背景颜色。 if the value of the 2nd column element is <= 10 then the color is green , from 11-20 its yellow and above 21 its red. 如果第二列元素的值<= 10，则颜色为绿色，黄色为11-20，红色为21以上。 I have given the sample code here. 我在这里给出了示例代码。 actually in real , the table is derived from the database , iy may have any nomber of rows. 实际上，表是从数据库派生的，即可能有任意行。 so i need to color the column as the page gets loaded. 所以我需要在页面加载时为列着色。 Any help is appreciated, thanks. 任何帮助表示赞赏，谢谢。

Answer 1

First off, don't use the same ID's for any elements on a page. 首先，请勿对页面上的任何元素使用相同的ID。 It is a unique identifier. 它是唯一的标识符。 If you want to reference more than one element, then use a class instead. 如果要引用多个元素，请改用类。

The simplest way to achieve what you want is using two classes - one to define xxx, and then one to define its status (colour). 实现所需目标的最简单方法是使用两个类-一个用于定义xxx，然后一个用于定义其状态（颜色）。 Also, if you use semantic naming (instead of .green,.yellow,.red) you will get good understanding of your code. 另外，如果您使用语义命名（而不是.green，.yellow，.red），则会对代码有很好的了解。

ex 前

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

You cannot set CSS depending on the content inside the element. 您不能根据元素内的内容设置CSS。 For this you would need some simple jQuery/javascript or your chosen programming language to loop through all the xxx-classes in the table, and add the status class accordingly. 为此，您将需要一些简单的jQuery / javascript或您选择的编程语言来遍历表中的所有xxx类，并相应地添加状态类。

ex 前

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

Answer 2

Firstly you should change the ID xxx to Class xxx. 首先，您应该将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'});
    }
 }

I think that should work with jQuery. 我认为应该使用jQuery。

Answer 3

The following modified plain JavaScript will colour the <td> elements as required: 以下经过修改的普通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';
        }
    }
}

but you will need to modify the HTML to give the <td> s unique ID values, for example 但是您将需要修改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>

If it is always the middle cell that needs colour you could remove the id s completely and rely on the fact that is is "always the middle cell". 如果总是需要颜色的中间单元格，则可以完全删除id并依靠“始终是中间单元格”这一事实。 For example use the following selector instead: 例如，使用以下选择器代替：

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

The only limitation is that querySelectorAll is that it is not supported by IE<9. 唯一的限制是querySelectorAll是IE <9不支持它。 All other browsers support it. 所有其他浏览器都支持它。

Since the cell that requires a background-color is always the 2nd cell, you can use the CSS nth-child selector as the argument to in querySelectorAll() to "select the 2nd <td> child element of the parent", which in this case is the <tr> . 由于需要background-color的单元格始终是第二个单元格，因此您可以使用CSS nth-child选择器作为querySelectorAll()的参数来“选择父级的第二个<td>子元素”，在此情况下大小写是<tr> 。

So td:nth-child(2) finds the the <td>two</td> element for the following HTML: 因此， td:nth-child(2)为以下HTML查找<td>two</td>元素：

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

See some examples of how :nth-child works. 查看有关:nth-child如何工作的示例。

Demo of id -less solution (for if the cell to colour is always the middle one). 无id解决方案的演示 （如果要着色的单元格始终是中间的单元格）。

Since OP is stuck with IE8 and IE8 does not support :nth-child an alternative adjacent sibling combinator can be used to target the 2 ^nd child with the caveats that there must only be 3 <td> and the 3 ^rd must not contain any numbers. 由于OP卡在IE8上并且IE8不支持:nth-child ，因此可以使用另一个相邻的同级组合器来定位^第二个孩子，但要注意的是只能有3个<td>并且^第三个孩子不能包含任何数字。

Update: 更新：

Based on the actual requirements of needing to work in IE8 and add background-color to the 6 ^th column, here is a simpler (to read) and more cross-browser compatible jQuery solution: 根据需要在IE8工作，增加的实际需求background-color至^第 6列，这里是一个简单（读）和更多的跨浏览器兼容的jQuery的解决方案：

jsBin demo (so it works on IE8) jsBin演示 （因此可在IE8上使用）

HTML 的HTML

Remove the onload="checkForm(); from <body> 从<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 的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

Here is what you want : 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 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