Question

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

我尝试过这些没有成功：

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

当然，我可以根据每个TD的内容为每个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所必需的。

TD内容上的CSS选择器

1 个答案: