Conditional formatting HTML table cells/Rows Options

[ravinda77]

Hello,

I have a HTML table with 6 columns and many rows. I want to change the color of table data cell or entire row, if the value is "LOGIN EXPIRED".

Example

Server Login PasswordLastSet Days to Expire PasswordChecked Client

Test1 ab_67 1/25/2021 LOGIN EXPIRED YES C1

Test1 ab_63 1/25/2020 LOGIN EXPIRED YES C1

Test1 bb_67 5/25/2012 NEVER EXPIRE YES C1

Test1 ab_87 1/25/2012 NEVER EXPIRE YES C1

Test1 ab_47 1/25/2012 LOGIN EXPIRED YES C1

How can I achieve that ?



Thank you.

[Christian J]

Here's one idea:

CODE

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var t=document.getElementById('t'); // The table's ID value.
    for(var i=0; i<t.rows.length; i++)
    {
        if(t.rows[i].cells[3].innerText=='LOGIN EXPIRED YES') // Note: cells[3] is the 4th table cell.
        {
            t.rows[i].className='match';
            t.rows[i].cells[3].className='match';
        }
    }
}, false);
</script>

The script identifies the HTML table by the ID "t".

The 4th column is the one being checked, its text content is assumed to be exactly "LOGIN EXPIRED YES" (with no white space or similar around the text). It's also possible to check for partial matches, but if the text comes from a database maybe that's not necessary?

I give both the row and the cell the CLASS "match", that way you can style them independently e.g. like this:

CODE

tr.match  {
color: black;
background: pink;
}

td.match {
color: white;
background: red;
}