The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Conditional formatting HTML table cells/Rows
ravinda77
post Jun 20 2021, 02:30 PM
Post #1





Group: Members
Posts: 3
Joined: 20-June 21
Member No.: 27,987



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2021, 02:47 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Did you mean an entire column?

Assuming you do, you need to add COLGROUP and COL elements to your table.
https://htmlhelp.com/reference/html40/tables/colgroup.html

You seem to have 6 columns, if I read it right, and EPIRED is the fourth column. If that's right it would look like this. You class the col that corresponds to the column you want to target.

CODE
<colgroup>
    <col>
    <col>
    <col>
    <col class="foo">
    <col>
    <col>
  </colgroup>

<tr>
<!-- the rest of the table -->
</tr>
</table>


Then you style .foo as you want.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ravinda77
post Jun 20 2021, 02:55 PM
Post #3





Group: Members
Posts: 3
Joined: 20-June 21
Member No.: 27,987



QUOTE(pandy @ Jun 20 2021, 03:47 PM) *

Did you mean an entire column?

:
I meant if LOGIN EXPIRED the entire row should be in red. If it's hard to achieve just only the cell that contains value LOGIN EXPIRED background-color:red.

This post has been edited by ravinda77: Jun 20 2021, 02:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2021, 03:00 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oops! You meant row after all. No, not with only CSS. That would require logic CSS isn't capable of. I imagine it could be done with the help of JavaScript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2021, 03:16 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



If the HTML table is generated by a server-side script and a database, you might check the database values and add a CLASS attribute to the relevant TR element at the same time.

But if the table is static HTML I think javascript must be used.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ravinda77
post Jun 20 2021, 03:25 PM
Post #6





Group: Members
Posts: 3
Joined: 20-June 21
Member No.: 27,987



QUOTE(Christian J @ Jun 20 2021, 04:16 PM) *

If the HTML table is generated by a server-side script and a database, you might check the database values and add a CLASS attribute to the relevant TR element at the same time.

But if the table is static HTML I think javascript must be used.


Yes its generated through powerShell and connected to sql database. I have tried that approach and have not succeeded yet.

How can we achieve this with javascript?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2021, 08:14 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:17 PM