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

I have an html table and in a particular column the text is either set to 'Y' or 'N'. I'm wondering if it is possible to set the colour of the text to Red programmatically on load if the value is'N'?

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

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

3 个解决方案

#1

Using jQuery, it's easy:

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

Note: I tested the above file and it works. Copy to your desktop, save as yn.html, and run in a browser.

注意:我测试了上面的文件，它是有效的。复制到您的桌面，保存为yn。在浏览器中运行。

EDIT: To accomplish with a pure selector and not rely on the if statement...

编辑:使用纯选择器完成，而不依赖if语句…

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

This was following Tyler Holien's answer. This would be the better way to do it, since it doesn't involve so many function calls and is more expressive in less code. NOTE: Unfortunately, do not use this version if there would be other content that may contain N's and should not be selected, since contains will select all text that has N in it, not JUST the 'N'-only text.

这是泰勒·霍林的回答。这是一种更好的方法，因为它不涉及太多的函数调用，并且在更少的代码中更有表现力。注意:不幸的是，如果有其他内容可能包含N，并且不应该被选择，不要使用这个版本，因为contains将选择所有包含N的文本，而不仅仅是'N'纯文本。

#2

Try the following CSS:

试试下面的CSS:

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

#3

This is what I did

这就是我所做的

    $('.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');
        }
    });

#1