HTML - Change table cell color based on its content

Question

I must say I'm an absolute newbie in all this. I am writing a small xslt presentation file, with a table, and I would like to change the background color of either the cell or the line (either will do, but I would prefer changing only the cell background) depending on the content.

Example: RATING = "GOOD" "MEDIUM" "BAD"; depending on its value I want the background to be green, yellow or red.

My current table code:

<table width="1000" border="0" cellspacing="0" cellpadding="0" class="table-fill">
    <thead>
        <tr>
            <th scope="col">NAME</th>
            <th scope="col">VALUE</th>
            <th scope="col">RATING</th>
            <th scope="col">DESCRIPTION</th>
        </tr>
    </thead>
    <tbody>
        <xsl:for-each select="test/criteria">
            <tr>
                <td><xsl:value-of select="@nom" /></td>
                <td><xsl:value-of select="value" /></td>
                <td><xsl:value-of select="rating" /></td>
                <td><xsl:value-of select="descr" /></td>
            </tr>
        </xsl:for-each>
    </tbody>
</table>

Thank you in advance

--EDIT-- My question has been answered by @Yaakov Ainspan and resolved by @Ruud who gave me the bits of code I was lacking.

It's not a duplicate of "Is there a CSS selector for elements containing certain text?" because I didn't need to isolate a element from a string containing more than just my element, just to create classes with the same name as the content of a cell (which was in this case a single word)

so you mean i can add a class that will depend on the value of the cell? — Greg Symsym, Apr 17 '18 at 13:53
they are strings, and can be either "GOOD", "MEDIUM" or "BAD" — Greg Symsym, Apr 17 '18 at 13:54
by the way, I only wanna change the color of the rating cell — Greg Symsym, Apr 17 '18 at 13:54
You can change the color of the cell based on its contents using the [jQuery :contains()](https://api.jquery.com/jquery.contains/) selector. — yaakov, Apr 17 '18 at 14:05
okay, I'm gonna try this and tell you if it works. Thank you! — Greg Symsym, Apr 17 '18 at 14:06
Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — Steve, Apr 17 '18 at 15:43
@YaakovAinspan it worked just by creating xsl:attributes with a class name that was the content if the rating cell. No need for the jQuery selector. Thank you very much for your support! — Greg Symsym, Apr 18 '18 at 08:22

score 1 · Accepted Answer · answered Apr 17 '18 at 15:56

If it's just those three predefined values you could add classes to your stylesheet with the same names:

.GOOD {
    background-color: green;
}
.MEDIUM {
    background-color: yellow;
}
.BAD {
    background-color: red;
}

... and add the class attribute to either the row:

    <xsl:for-each select="test/criteria">
        <tr>
            <xsl:attribute name="class">
                <xsl:value-of select="rating" />
            </xsl:attribute>
            <td><xsl:value-of select="@nom" /></td>
            <td><xsl:value-of select="value" /></td>
            <td><xsl:value-of select="rating" /></td>
            <td><xsl:value-of select="descr" /></td>
        </tr>
    </xsl:for-each>

... or the cell:

    <xsl:for-each select="test/criteria">
        <tr>
            <td><xsl:value-of select="@nom" /></td>
            <td><xsl:value-of select="value" /></td>
            <td>
                <xsl:attribute name="class">
                    <xsl:value-of select="rating" />
                </xsl:attribute>
                <xsl:value-of select="rating" />
            </td>
            <td><xsl:value-of select="descr" /></td>
        </tr>
    </xsl:for-each>

Edit: for better readability you can also add the class this way:

    <xsl:for-each select="test/criteria">
        <tr>
            <td><xsl:value-of select="@nom" /></td>
            <td><xsl:value-of select="value" /></td>
            <td class="{rating}"><xsl:value-of select="rating" /></td>
            <td><xsl:value-of select="descr" /></td>
        </tr>
    </xsl:for-each>

Thank you very much, this did what I wanted – Greg Symsym Apr 18 '18 at 08:45 — Greg Symsym, Apr 18 '18 at 08:45

HTML - Change table cell color based on its content

1 Answers1