怎么用js根据单元格中的内容来改变table中的整行字体颜色

table绑定的数据中有一列入库量，如果这个入库量是负数，就设置整行的字体变成红色。用js如何实现... table绑定的数据中有一列入库量，如果这个入库量是负数，就设置整行的字体变成红色。用js如何实现展开

 我来答

2个回答

#热议# 空调使用不当可能引发哪些疾病？

马后雷鼓下扬州5058
推荐于2017-10-15 · TA获得超过4321个赞

知道小有建树答主

回答量：693

采纳率：33%

帮助的人：807万

我也去答题访问个人页

关注

展开全部

修改 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 = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName("td");
        for(var c = 0; c < cells.length; c++) {
            // 对应列
            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");
        }
    });
});