如何更改单元格中负值的背景色

How to change the background color of negative value in a cell?

本文关键字：背景色 何更改 单元格      更新时间：2023-09-26

我有一个表格，里面有一些不同单元格的数字
我想检查是否有任何单元格有value < 0，它可能会将其行的背景色更改为红色！我希望在单击按钮时调用函数，它可以检查整个文档的表。这就是我正在使用的：

function checkNegative(){
    function(e) {
        var $target = $(e.target);
        var checkNeg = function(c) {
            for(var i=0,$ci; i<c.length; i++) {
                $ci = $(c[i]);
                if(parseInt($ci.text()) < 0) $ci.css("color", "red");
                else $ci.css("color", "black");
            }
        };
        checkNeg($target.parents("table").find("[td]"));
    }
}

我在网上找到了这个，但对我的案子不起作用！请帮忙！我的桌子是这样的：

<table border="1" bordercolor="#bababb">
    <thead>
        <tr>
            <th>NUMBER1</th>
            <th>NUMBER2</th>
            <th>NUMBER3</th>
            <th>NUMBER4</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1202</td>
        <td>2587</td>
        <td>-2541</td>
        <td>3652</td>
    </tr>
    <tr>
        <td>1202</td>
        <td>2587</td>
        <td>2541</td>
        <td>-3652</td>
    </tr>
    <tr>
        <td>1202</td>
        <td>-2587</td>
        <td>2541</td>
        <td>3652</td>
    </tr>
    <tr>
        <td>-1202</td>
        <td>2587</td>
        <td>2541</td>
        <td>3652</td>
    </tr>
    <tr>
        <td>-1202</td>
        <td>2587</td>
        <td>-2541</td>
        <td>3652</td>
    </tr>
    <tr>
        <td>1202</td>
        <td>-2587</td>
        <td>-2541</td>
        <td>3652</td>
    </tr>
    </tbody>
</table>

我想我有这个问题的解决方案。我假设一个表有6行4列，其中有正值和负值。

我还有一个javascript方法，它根据正值或负值对背景进行着色。请在这里找到小提琴

脚本是：

var formatBackground=function(){
    var table, tbody, rowCount, cellCount, value;
    table=document.getElementsByTagName('table')[0];
    if(table.childNodes[1]) tbody=table.childNodes[1];
    if(tbody) rowCount=tbody.childNodes.length;
    for(i=0;i<rowCount;i++){
        cellCount=tbody.childNodes[i].childNodes.length;
        for(j=1;j<cellCount;j++){
            value=tbody.childNodes[i].childNodes[j].outerText;
            if(parseInt(value)<0) tbody.childNodes[i].childNodes[j].setAttribute('style','background-color: #f00');
            j+=1;
        }
        i+=1;
    }
};

<table id="your_table_id">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>-3</td>
        <td>4</td>
    </tr>
    <tr>
        <th>-2</th>
        <th>-1</th>
        <th>0</th>
        <th>5</th>
    </tr>
    <tr>
        <td>+5</td>
        <td>-3</td>
        <td>0</td>
        <td>-2.3</td>
    </tr>
</table>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(function() {
        $("#your_table_id td").each(function(){
            var txt = $(this).text();
            if( !isNaN(txt) && parseInt(txt) < 0 )
                $(this).parent().css('background-color', 'red');
        });
    });
</script>

因此，只需对代码进行最小的更改即可使其工作：

var checkNeg = function(c) {
    for(var i=0,$ci; i<c.length; i++) {
        $ci = $(c[i]);
        console.log(i, parseInt($ci.text()));
        if(parseInt($ci.text()) < 0) $ci.css("color", "red");
        else $ci.css("color", "black");
    }
};
$('table *').click(function(e) {
    checkNeg($(e).closest("table").find("td"));
});

语法错误是由于匿名函数（function(e) { ... }）在没有以任何方式使用的情况下包装事物（即既没有调用也没有存储在变量中）。

我在评论中谈到的"[td]"选择器将选择具有名为td的属性的所有节点，例如<div td="foo">；而不是CCD_ 6元素。为此，您需要"td"选择器。

为了真正响应表中的单击，您需要有一个单击处理程序。

内心的密码本身我没有触及；Chak的回答向你展示了做同样事情的更好方法，但两者都应该有效。

您可以简单地将jQuery选择器从"#your_table_id td"更改为"table td"，并在clickhandler中调用函数，类似于以下内容：

var checkNegative = function(e) {
    e.preventDefault();
    $('table td').each(function() {
        //Allen Chak's code here
    });
}
$('#mybutton').click(checkNegative);

我无意冒犯，但如果你自己无法理解这种变化，我建议你帮自己一个忙，多研究一下javascript和jQuery。你可以实现它并对它的工作感到高兴，但你会更好地真正理解你的代码；）

相关文章：