javascript：检查a<；的条件；td>；表中的值，具体取决于其表头_Javascript_Html

javascript：检查a<；的条件；td>；表中的值，具体取决于其表头

javascript html

javascript：检查a<；的条件；td>；表中的值，具体取决于其表头,javascript,html,Javascript,Html,在我的HTML页面中，我有一个从数据库接收数据的动态表。所有单元格都有数值。我需要检查不同列的不同条件值是否小于或大于特定值，并根据结果为该单元格指定背景色。我不想给每个td标签一个id。我想用JavaScript实现这一点。下面是我已经实现的代码 function color() { var val = 0; //value to be compared with var header = document.getElementById("test").getElementsB

在我的HTML页面中，我有一个从数据库接收数据的动态表。所有单元格都有数值。我需要检查不同列的不同条件值是否小于或大于特定值，并根据结果为该单元格指定背景色。我不想给每个td标签一个id。我想用JavaScript实现这一点。下面是我已经实现的代码

function color() {
    var val = 0; //value to be compared with
    var header = document.getElementById("test").getElementsByTagName("th");
    for (var j = 0; j < header.length; j++) {
        if (header[j].innerHTML == "NB HC") { //comparing the table header
            var cells = document.getElementById("test").getElementsByTagName("td");
            for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerHTML > val) {
                    cells[i].style.backgroundColor = "red";
                }
            }
        }
    }
}

函数颜色（）{
var val=0；//要与之比较的值
var header=document.getElementById（“test”）.getElementsByTagName（“th”）；
对于（var j=0；jval）{
单元格[i].style.backgroundColor=“红色”；
}
}
}
}
}

在这段代码之后，结果是，比较在所有列中进行。我希望这发生在标题为“NB HC”的列中

我的HTML看起来像

<body onload="color()">

<table  id="test">

    <tr>
        <td>B HC</td>
        <td>NB HC</td>
        <td>Support HC</td>
    </tr>

          <core:forEach items="${myCondition}" var="row">
       <tr>


                <td width="60 px" align="center">my Value</td>


               <td width="60 px" align="center">my Value 1</td>


               <td width="60 px" align="center">my Value 2</td>
     </tr>
    </core:forEach>
</table>

</body>


B HC
NB HC
支持HC
我的价值
我的价值1
我的价值2

好的，假设您有3个这样的标签，您不想识别它们。一个很好的解决方法是：

document.getElementsByTagName（'td'）[index#]

因此整个网页上的第一个

将是

[0]

的索引。您可以将其放入

for

循环中，并使用一个变量作为索引号，然后可能在上面的行之后添加一行，以获取值

.value

或

.nodeValue

或

.innerText

，具体取决于您尝试比较的子节点

也就是说，循环的每一次迭代都可以检查

是否
是一个特定的条件，并以您想要的方式进行必要的更改。我会提供一个更彻底的答案，但我不知道你的HTML是什么样子。总之，我认为document.getElementsByTagName（'td'）[0]之后的索引号是您所需要的，这样它就不会返回问题中的所有标记，只返回特定的标记。
首先您已经找到标题“NB HC”列的索引。然后在记录上打圈，与更改背景颜色进行比较
    function color() {
        var val = 0; //value to be compared with
        var ColIndexToCheck=0;
        var header = document.getElementById("test").getElementsByTagName("th");
        for (var j = 0; j < header.length; j++) {
        if (header[j].innerHTML == "NB HC") 
           ColIndexToCheck=j;
        }

          var trs= document.getElementById("test").getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                if (trs[i].cells[ColIndexToCheck].innerHTML > val) {
                    trs[i].cells[ColIndexToCheck].style.backgroundColor = "red";
                }
            }

}

函数颜色（）{
var val=0；//要与之比较的值
var ColIndexToCheck=0；
var header=document.getElementById（“test”）.getElementsByTagName（“th”）；
对于（var j=0；jval）{
trs[i].cells[ColIndexToCheck].style.backgroundColor=“red”；
}
}
}
innerHTML
始终是一个字符串。但是比较值成功，并且显示背景色。但问题是，它发生在所有栏目中。我不希望发生这种情况。不要在表中获取所有td
s，而是循环遍历所有tr
s（在您的tbody中，这样它就不会获取标题行），然后获取该行中的所有td
s，只需使用相同的索引（j
）检查td
）作为你的标题。我不明白你的意思，如果我将值更改为10，它将不起作用。因为它确实有效@通过tr然后移动到td的Teemuloop没有产生预期的输出@克里斯蒂安314159