JS怎么根据动态表格的某列值修改另一列的字体颜色

JavaScript07

JS怎么根据动态表格的某列值修改另一列的字体颜色,第1张

var ChangeColor = {

change : function(){

var color_param = ${lightColor}

document.getElementById("需要变颜色的字体所在的容器ID").style.color = color_param

}

}

页面加载时调用 <body onload="ChangeColor.change()">

修改 column_num 的值对应你 table 中的列数，下例检查的是第二列

<script type="text/javascript">

window.onload = function() {

// 第二列

var column_num = 2

// 获取元素

var table = document.getElementById("table"),

rows = table.getElementsByTagName("tr")

// 循环表格

for(var i = 0i <rows.lengthi++) {

var cells = rows[i].getElementsByTagName("td")

for(var c = 0c <cells.lengthc++) {

// 对应列

if(c + 1 === column_num

// 判断是否小于 0

&&parseFloat(cells[c].innerHTML) <0) {

// 两者均成立，改变颜色

rows[i].style.color = "#f00"

// 检查下一行

break

}

}

}

}

</script>

BBB 和 CCC 这两行会变成红色

<table border="1" id="table">

<tr><td>AAA</td><td>124</td><td>XXX</td></tr>

<tr><td>BBB</td><td>-66</td><td>YYY</td></tr>

<tr><td>CCC</td><td>-95</td><td>ZZZ</td></tr>

</table>

如果你使用 jQuery，那可以更简单一些。没有的话就用上面的原生 JavaScript 代码。

$(function() {

$("#table tr td:nth-child(2)").each(function() {

if(parseFloat($(this).text()) <0) {

$(this).parent().css("color", "#f00")

}

})

})