Style table cells dynamically based on their content in HTML

Question

Style table cells dynamically based on their content in HTML

As a complete beginner in this field, I am currently working on a simple xslt presentation file that includes a table. I want to customize the background color of either a cell or an entire row based on its content.

For example, if the rating is "GOOD", "MEDIUM" or "BAD", I would like the background color to be green, yellow, or red respectively.

This is 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>

Your help is greatly appreciated.

--UPDATE-- Special thanks to @Yaakov Ainspan for answering my question, and @Ruud for providing the necessary code snippets.

This is not a duplicate of "Is there a CSS selector for elements containing certain text?" because I was focused on creating classes with names matching the content of a specific cell, rather than isolating elements from strings with multiple contents.

html xml css xslt html-table

Answer 1

Answer №1

If you are dealing with only those specific three values, consider creating classes in your stylesheet that correspond to each value:

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

Then, you can either add the class attribute to the row like this:


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

Alternatively, you can add the class attribute directly to 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>

You also have the option to improve readability by adding the class in a different 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>

Answer 2

If you are dealing with only those specific three values, consider creating classes in your stylesheet that correspond to each value:

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

Then, you can either add the class attribute to the row like this:


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

Alternatively, you can add the class attribute directly to 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>

You also have the option to improve readability by adding the class in a different 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>

Style table cells dynamically based on their content in HTML

Answer №1

Similar questions

What is the difference between finding the XPath of immediate child text and all descendant text?

Troubleshooting CSS Problems: Issues with background repeating and footer placement

Guide on capturing JSON objects when the server and client are both running on the same system

Change the location of an html td element with JavaScript

Are there any tools you rely on for speeding up the process of developing html/css?

What could be the reason my code isn't successfully performing addition within the input field?

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

Switch out the HTML content within the JavaScript include

"Tips for stopping users from using Ctrl+U to view page source in

What is the best way to allow CORS in an internet server by utilizing AJAX and PHP in order to obtain a font to be used on a different BigCart

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?

Execute a function when a button is pressed in a React application

Tips for avoiding anti-aliasing of bitmap font on Internet Explorer and Firefox

The disabled button is not displayed when it is disabled

The functionality to open the menu by clicking is experiencing issues

Placing an image on the chosen option of a <mat-select> using Angular Material

Data not being displayed in dynamic <table>

Is there a way to automatically scroll two identical vertical long images one after the other in a continuous loop?

Icon that can be clicked before

Need to swiftly modify values of css attributes?