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

Question

我有一个表格，里面有不同单元格的一些数字。
我想检查任何单元格是否有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]"));
    }
}

我在 Internet 上找到了这个，但不适用于我的情况！ 请帮忙！ 我的表是这样的：

<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>

Answer 1

我想我有解决问题的办法。我假设一个有 6 行 4 列的表，正负值。

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

脚本是：

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;
    }
};

Answer 2

您可以简单地将 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。你可以实现它并且很高兴它可以工作，但是你会更好地理解你的代码;）

Answer 3

因此，只需对代码进行少量更改即可使其正常工作：

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) { ... }) 包装了东西而没有以任何方式使用（即既不调用也不存储在变量中）。

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

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

我没有触及的内在代码本身； Allen Chak 的回答向您展示了一种更好的方法来做同样的事情，但两者都应该有效。

Answer 4

<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>