html - TD 内容上的 CSS 选择器

Question

我有一个表格，其 TD 包含普通文本。有没有办法根据 TD 的内容在 TD 上设置样式(例如设置背景颜色)？例如，我可能希望 GO 有绿色背景，而 RED 应该有红色背景。

我试过这些都没有成功:

td[innerText='GO']
td[innerHtml='GO']
td[outerText='GO']

当然，我可以根据其内容为每个 TD 设置类或显式样式，但我宁愿避免这种情况。

Answer 1

您必须使用 javascript 检查内容，然后更改 td 标签的样式。

您可能在 script.js 文件中有一个函数:

function tdStyle(current_table) {

    var tds = current_table.getElementsByTagName("td");

    for (i = 0; i < tds.length; i++) {

        if (tds[i].textContent == "string1" || tds[i].innerText == "string1") {
            tds[i].style.backgroundColor = "green";
        } else if (td_tag.textContent == "string2" || tds[i].innerHTML == "string2") {
            tds[i].style.backgroundColor = "red";
        } else if (td_tag.textContent == "string3" || tds[i].innerHTML == "string3") {
            tds[i].style.backgroundColor = "blue";
        }

    }

}

然后在 table 标签中使用这个函数，例如:

<table onload="tdStyle(this);">
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
...
</table>

请注意，比较是与 tds[i].textContent 和 tds[i].innerText 进行的，因为后者是 IE 所必需的。