Question

I have a table whose TD’s contain ordinary text. Is there a way to style (e.g. set the background color) on a TD according to the TD’s contents? For example, I might want GO to have a green background, while RED should have a red background.

I’ve tried these without success:

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

Of course I could set a class or an explicit style for each TD according to its contents, but I would prefer to avoid that.

Answer 1

You’ll have to use javascript to check the contents, and then alter the style of your td tag.

You may have a function in a script.js file:

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

    }

}

And then you use this function in your table tag, like:

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

Notice the comparison is made with both tds[i].textContent and tds[i].innerText, as the later is required for IE.