Question

我有一个html表，在特定列中，文本设置为'Y'或'N'。我想知道如果值为'N'，是否可以在加载时以编程方式将文本的颜色设置为红色？

<table>
    <tr>
        <td>N</td>
        <td>Y</td>
    </tr>
</table>

Answer 1

使用jQuery，很简单：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#table_id td.y_n').each(function(){
        if ($(this).text() == 'N') {
            $(this).css('background-color','#f00');
        }
    });
});

</script>

</head>
<body>

<table id="table_id">
 <tr><th>Question</th><th>Y/N?</th></tr>
 <tr><td>I am me.</td><td class="y_n">Y</td></tr>
 <tr><td>I am him.</td><td class="y_n">N</td></tr>
 <tr><td>I am not sure.</td><td class="y_n">Y</td></tr>
 <tr><td>This is a table.</td><td class="y_n">Y</td></tr>
</table>

</body>
</html>

注意：我测试了上面的文件并且它有效。复制到桌面，另存为yn.html，然后在浏览器中运行。

编辑：使用纯粹的选择器完成而不依赖于if语句......

$(document).ready(function(){
    $("#table_id td.y_n:contains('N')").css('background-color','#fcc');
});

这是跟随Tyler Holien的回答。这将是更好的方法，因为它不涉及如此多的函数调用，并且在更少的代码中更具表现力。注意：不幸的是，如果有其他内容可能包含N并且不应该被选中，请不要使用此版本，因为contains将选择其中包含N的所有文本，而不仅仅是“N”文本。

Answer 2

尝试以下CSS：

td[value="N"] {
    color: red;
}

Answer 3

这就是我做的事情

    $('.dataframe td').each(function(){
        var num = parseFloat($(this).text());
        if (num > 0) {
            $(this).addClass('success');
            //$(this).css('color','Green');
        } else if (num < 0) {
            $(this).addClass('danger');
            //$(this).css('color','Red');
        }
    });

html表根据值设置一些单元格文本颜色

3 个答案: