0

我正在尝试遍历一个表以获取每个 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 以上为红色。我在这里给出了示例代码。实际上，表是从数据库中派生的，可能有任意数量的行。所以我需要在页面加载时为列着色。任何帮助表示赞赏，谢谢。

4

4 回答 4

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>
于 2013-05-24T07:34:54.157 回答
1

首先，您应该将 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。

于 2013-05-24T07:36:00.500 回答
1

以下修改后的纯 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>

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

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

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

由于需要 a 的单元格background-color始终是第二个单元格，因此您可以使用 CSS nth-child 选择器作为 in 的参数querySelectorAll()来“选择父级的第二<td>个子元素”，在本例中为<tr>.

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

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

查看一些如何:nth-child工作的示例。

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

由于 OP 被 IE8 卡住，并且 IE8 不支持:nth-child替代的相邻兄弟组合器，因此可以使用替代相邻兄弟组合器来定位第二个孩子，但需要注意的是必须只有 3 个<td>，而第三个不得包含任何数字。

更新：

根据需要在IE8下工作的实际background-color需求并添加到第6列，这里有一个更简单（易读）且更跨浏览器兼容的jQuery解决方案：

jsBin 演示（所以它适用于 IE8）

HTML

onload="checkForm();从_<body>

<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';
        }
    }
});
于 2013-05-24T07:37:20.243 回答
0

这就是你想要的： 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';
            }
        }

    });
于 2013-05-24T07:57:23.597 回答