【问题标题】:Table formatting based on cell content in JavascriptJavascript中基于单元格内容的表格格式
【发布时间】:2014-03-17 21:32:54
【问题描述】:

我有一个表格,最左边的列中有文本,所有其他列中有数字。如何根据单元格中的数字为单元格着色?我想将 background-color = "red" 设置为负数并忽略其中包含文本的列,也忽略其中包含正数的单元格。

下面是我从另一个问题中提取的代码并进行了一些修改,但它似乎不起作用。

var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];
    var currentVal = node.childNodes[0].nodeValue; 
    if(currentVal.toFixed){
        if (currentVal <0)
            node.style.backgroundColor = "red"; // -ive number
    } else{
        // do nothing, the cell has text
    }
}

【问题讨论】:

    标签: javascript formatting


    【解决方案1】:

    你应该解析数字:

    var allTableCells = document.getElementsByTagName("td");
    for(var i = 0, max = allTableCells.length; i < max; i++) {
        var node = allTableCells[i];
        var currentVal = parseFloat(node.childNodes[0].nodeValue); 
        if(currentVal!=NaN){
            if (currentVal <0)
                node.style.backgroundColor = "red";
        } 
    }
    

    或者使用 jQuery 和 css 更好:

    脚本:

    $("td").filter(function(c){
        var num=parseFloat(this.innerText);
        return num!=NaN && num < 0;
    }).addClass("neg");
    

    $("td:contains('-')").addClass("neg");
    

    CSS:

    .neg{
        background-color: red;
    }
    

    【讨论】:

    • 有没有办法在 td.number 的样式中做同样的事情,像这样 => td.number { text-align:right; /* 基于实际内容的格式*/}
    • 什么意思?使用 node.class?
    • 我可以定义一个像 td.number 这样的新类并在其中测试值然后相应地格式化吗?像
    • 我添加了其他可能的解决方案
    猜你喜欢
    • 2010-11-29
    • 2015-04-03
    • 2012-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多