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