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]"));
    }
}

我在互联网上找到了这个，但不适合我的情况！请帮忙！我的表看起来像这样：

<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

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

Answer 2

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

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">;不是td元素。为此，您需要"td"选择器。

要实际响应表中的点击，您需要有一个点击处理程序。

内部代码本身我没有碰; Allen Chak的答案向你展示了一个更好的方法来做同样的事情，但要么应该工作。

Answer 3

您只需将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 4

我想我已经解决了这个问题。我假设一个有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;
    }
};

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

4 个答案: