Conditional formatting HTML table cells/Rows |
Conditional formatting HTML table cells/Rows |
ravinda77 |
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. |
pandy |
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. |
ravinda77 |
Jun 20 2021, 02:55 PM
Post
#3
|
Group: Members Posts: 3 Joined: 20-June 21 Member No.: 27,987 |
|
pandy |
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.
|
Christian J |
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. |
ravinda77 |
Jun 20 2021, 03:25 PM
Post
#6
|
Group: Members Posts: 3 Joined: 20-June 21 Member No.: 27,987 |
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? |
Christian J |
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; } |
Lo-Fi Version | Time is now: 18th March 2024 - 10:17 PM |