# HTML Table- dynamically change the selected row font color
**URL:** https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394
**Category:** Dashboard
**Tags:** node-red-dashboard, html
**Created:** [31 May 2024 01:11 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394 "2024-05-31T01:11:08Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 01:11 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/1 "2024-05-31T01:11:08Z")
I have a html table I generate from flow.context variables. I am able to currently make the selected row font bold to highlight by using `` html tags, i want to do the same with font color, but unable to do.
a little help solicited.
```auto
[{"id":"75338d9bb0c27ede","type":"inject","z":"47da0e9a083f3b25","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":" | 06:36:23 | CR3 | MSP1 | BTP | SP4 | SP3 | PFSL | PFSR | CR1 | JUC | CFT | 14T | 12T | BTP2 | BTP3 | SP5 | AP2 | MSP2 | BAGR | DIP |
| | | | | | | | | | | | | | | | | | | |
| 06:00 to 07:00 | 0 | 0 | 1122 | 4 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 34 | 1213 | 0 | 0 | 0 | 0 | 0 |
| 23:00 to 00:00 | 0 | 0 | 1784 | 1072 | 0 | 1135 | 1069 | 699 | 7268 | 0 | 0 | 0 | 4721 | 4418 | 0 | 0 | 0 | 96 | 0 |
| 00:00 to 01:00 | 0 | 0 | 2131 | 403 | 0 | 421 | 386 | 310 | 2110 | 0 | 0 | 0 | 6284 | 6136 | 0 | 0 | 0 | 157 | 0 |
| 01:00 to 02:00 | 0 | 0 | 1 | 953 | 0 | 873 | 837 | 299 | 8414 | 0 | 0 | 0 | 5262 | 6284 | 0 | 0 | 0 | 107 | 0 |
| 02:00 to 03:00 | 0 | 0 | 12 | 1090 | 0 | 278 | 257 | 412 | 3642 | 0 | 0 | 0 | 5253 | 6167 | 0 | 0 | 0 | 0 | 0 |
| 03:00 to 04:00 | 0 | 0 | 323 | 221 | 0 | 274 | 249 | 8 | 5770 | 0 | 0 | 0 | 2699 | 3664 | 0 | 0 | 0 | 0 | 0 |
| 04:00 to 05:00 | 0 | 0 | 1631 | 1267 | 0 | 858 | 827 | 0 | 629 | 0 | 0 | 0 | 5197 | 5524 | 0 | 0 | 0 | 0 | 0 |
| 05:00 to 06:00 | 0 | 0 | 3600 | 1003 | 0 | 930 | 944 | 0 | 0 | 0 | 0 | 31 | 5835 | 6260 | 0 | 0 | 0 | 90 | 0 |
","payloadType":"str","x":2530,"y":1340,"wires":[["84f944cb1b590ce7","9a1039149fb26658"]]},{"id":"9a1039149fb26658","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"","order":2,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2870,"y":1340,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 May 2024 05:54 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/2 "2024-05-31T05:54:36Z")
The format you are offering as an example, does not lend itself to easy viewing.
Maybe put it in an template node on multiple lines.
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 06:03 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/3 "2024-05-31T06:03:42Z")
```auto
| 11:28:04 |
CR3 | MSP1 | BTP | SP4 |
SP3 | PFSL | PFSR | CR1 |
JUC | CFT | 14T | 12T |
BTP2 | BTP3 | SP5 | AP2 |
MSP2 | BAGR | DIP |
|
| | | |
| | | |
| | | |
| | | |
| | |
| 06:00 to 07:00 | 0 | 0 | 2307 | 635 | 0 | 210 | 203 | 0 | 0 |
0 | 0 | 0 | 2673 | 3853 | 0 | 0 | 0 | 0 | 0 |
| 07:00 to 08:00 | 0 | 0 | 3203 | 649 | 0 | 836 | 817 | 0 | 0 |
0 | 0 | 0 | 6600 | 6600 | 0 | 0 | 0 | 0 | 0 |
| 08:00 to 09:00 | 0 | 0 | 2215 | 738 | 43 | 74 | 72 | 0 | 0 |
0 | 0 | 0 | 6600 | 6600 | 0 | 0 | 0 | 0 | 0 |
| 09:00 to 10:00 | 0 | 0 | 3600 | 0 | 140 | 1028 | 985 | 2 | 1 |
0 | 0 | 0 | 5428 | 5408 | 0 | 0 | 0 | 0 | 0 |
| 10:00 to 11:00 | 0 | 0 | 3253 | 309 | 283 | 612 | 598 | 24 | 7 |
0 | 0 | 93 | 6491 | 6490 | 0 | 0 | 0 | 0 | 0 |
| 11:00 to 12:00 | 0 | 0 | 1620 | 0 | 61 | 0 | 0 | 0 | 1090 |
0 | 0 | 0 | 2970 | 2971 | 0 | 0 | 0 | 0 | 0 |
| 04:00 to 05:00 | 0 | 0 | 1631 | 1267 | 0 | 858 | 827 | 0 | 629 |
0 | 0 | 0 | 5197 | 5524 | 0 | 0 | 0 | 0 | 0 |
| 05:00 to 06:00 | 0 | 0 | 3600 | 1003 | 0 | 930 | 944 | 0 | 0 |
0 | 0 | 31 | 5835 | 6260 | 0 | 0 | 0 | 90 | 0 |
```
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 06:04 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/4 "2024-05-31T06:04:54Z")
```auto
[{"id":"480e6a499c420347","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"","order":2,"width":0,"height":0,"format":"\n \n \n \n \n\n \n \n \n | 11:28:04 | \n CR3 | MSP1 | BTP | SP4 | \n SP3 | PFSL | PFSR | CR1 | \n JUC | CFT | 14T | 12T | \n BTP2 | BTP3 | SP5 | AP2 | \n MSP2 | BAGR | DIP | \n
\n \n \n | \n | | | | \n | | | | \n | | | | \n | | | | \n | | | \n
\n\n \n | 06:00 to 07:00 | 0 | 0 | 2307 | 635 | 0 | 210 | 203 | 0 | 0 | \n 0 | 0 | 0 | 2673 | 3853 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 07:00 to 08:00 | 0 | 0 | 3203 | 649 | 0 | 836 | 817 | 0 | 0 | \n 0 | 0 | 0 | 6600 | 6600 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 08:00 to 09:00 | 0 | 0 | 2215 | 738 | 43 | 74 | 72 | 0 | 0 | \n 0 | 0 | 0 | 6600 | 6600 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 09:00 to 10:00 | 0 | 0 | 3600 | 0 | 140 | 1028 | 985 | 2 | 1 | \n 0 | 0 | 0 | 5428 | 5408 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 10:00 to 11:00 | 0 | 0 | 3253 | 309 | 283 | 612 | 598 | 24 | 7 | \n 0 | 0 | 93 | 6491 | 6490 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 11:00 to 12:00 | 0 | 0 | 1620 | 0 | 61 | 0 | 0 | 0 | 1090 | \n 0 | 0 | 0 | 2970 | 2971 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 04:00 to 05:00 | 0 | 0 | 1631 | 1267 | 0 | 858 | 827 | 0 | 629 | \n 0 | 0 | 0 | 5197 | 5524 | 0 | 0 | 0 | 0 | 0 | \n
\n \n | 05:00 to 06:00 | 0 | 0 | 3600 | 1003 | 0 | 930 | 944 | 0 | 0 | \n 0 | 0 | 31 | 5835 | 6260 | 0 | 0 | 0 | 90 | 0 | \n
\n \n\n\n \n \n \n \n \n
\n \n \n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2820,"y":1490,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 06:09 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/5 "2024-05-31T06:09:30Z")
basically, what i am trying to do is create a dynamic table which is updated **every minute** and displays the total count for several machines for a period of last 8 hours, grouped at every hour. I want to highlight the **current hour** only for easy reading.
i am getting the data from mysql table updating the flow.context and send updated data to the table every minute. (only the current hour group data is changing and there i am using mustache template to change the html tag to make them bold. i tried doing color also, some how none of the html tags are working.
i tried CSS, but it is beyond my understanding.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 May 2024 07:01 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/6 "2024-05-31T07:01:28Z")
That would be easier to take the data and construct the table.
You could parse the data and add a property to set colour and strong for the correct hour. Then when you construct the dynamic table you can use the properties to background and strong. IF you supply the data I will give an example( may be later as just broke my reading glasses.)
The other way would be to use the dom or jquery to look for specific class/id attribute values and update the document attributes accordingly using JS
---
### Author:  [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [31 May 2024 07:25 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/7 "2024-05-31T07:25:48Z")
I would use something like this (with javascript)
```auto
| 11:28:04 |
CR3 |
MSP1 |
BTP |
SP4 |
SP3 |
PFSL |
PFSR |
CR1 |
JUC |
CFT |
14T |
12T |
BTP2 |
BTP3 |
SP5 |
AP2 |
MSP2 |
BAGR |
DIP |
| 06:00 to 07:00 |
0 |
0 |
2307 |
635 |
0 |
210 |
203 |
0 |
0 |
0 |
0 |
0 |
2673 |
3853 |
0 |
0 |
0 |
0 |
0 |
| 07:00 to 08:00 |
0 |
0 |
3203 |
649 |
0 |
836 |
817 |
0 |
0 |
0 |
0 |
0 |
6600 |
6600 |
0 |
0 |
0 |
0 |
0 |
| 08:00 to 09:00 |
0 |
0 |
2215 |
738 |
43 |
74 |
72 |
0 |
0 |
0 |
0 |
0 |
6600 |
6600 |
0 |
0 |
0 |
0 |
0 |
| 09:00 to 10:00 |
0 |
0 |
3600 |
0 |
140 |
1028 |
985 |
2 |
1 |
0 |
0 |
0 |
5428 |
5408 |
0 |
0 |
0 |
0 |
0 |
| 10:00 to 11:00 |
0 |
0 |
3253 |
309 |
283 |
612 |
598 |
24 |
7 |
0 |
0 |
93 |
6491 |
6490 |
0 |
0 |
0 |
0 |
0 |
| 11:00 to 12:00 |
0 |
0 |
1620 |
0 |
61 |
0 |
0 |
0 |
1090 |
0 |
0 |
0 |
2970 |
2971 |
0 |
0 |
0 |
0 |
0 |
| 04:00 to 05:00 |
0 |
0 |
1631 |
1267 |
0 |
858 |
827 |
0 |
629 |
0 |
0 |
0 |
5197 |
5524 |
0 |
0 |
0 |
0 |
0 |
| 05:00 to 06:00 |
0 |
0 |
3600 |
1003 |
0 |
930 |
944 |
0 |
0 |
0 |
0 |
31 |
5835 |
6260 |
0 |
0 |
0 |
90 |
0 |
```
in short:
define a class in css
upon load, it runs a javascript find to the text and applies the class on the row the text was found.
the text can be filled via mustache, eg
```auto
const searchText = '{{timeframe}}' //eg: '05:00 to 06:00'
```
result:
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 08:52 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/8 "2024-05-31T08:52:06Z")
I tried similar thing. but somehow the output is not coming out as expected.
your example is giving me plain output (no bg color and no bold for the hour selected).
how do i find out if there are any conflicitng CSS defined in my flow ?
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 08:54 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/9 "2024-05-31T08:54:21Z")
> [@E1cid](#):
>
> supply the data
Sorry, Is the example given by me not sufficing ?
I tried @bakman2 example also, some how it is not working.
at least the example I have given gives me BOLD font. CSS is somehow not working if there is any inline html tag like for font color i would be happy.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 May 2024 08:58 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/10 "2024-05-31T08:58:10Z")
> [@smanjunath211](#):
>
> Sorry, Is the example given by me not sufficing ?
For the desired output yes the example is fine.
But if this data is coming in every minute then it would be best to show incoming data, how it is stored and what data you use to create the html page, unless you use the Jquery option, as in @bakman2 example.
---
### Author:  [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [31 May 2024 08:58 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/11 "2024-05-31T08:58:45Z")
> [@smanjunath211](#):
>
> some how it is not working.
What exactly is not working ?
Did you put in the code into a template node ? It works.
Your example table was not properly formatted, I have made corrections. Now ofcourse you need to adapt it to the data coming out of your database and supply the custom text that needs to be found in `{{timeframe}}`
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 09:04 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/12 "2024-05-31T09:04:57Z")
I just copied your complete example and the background color is not showing up, neither the font is bold.
I am sure your example is right, but some settings in my flow may be hindering the execution.
I am getting a plain table like this.
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 09:08 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/13 "2024-05-31T09:08:07Z")
The machine sensors data is logged into a mysql database every minute in a separate flow.
I am using this flow to mysql query the data in group by hour.
after the data is populated, i store all the individual machinesm hourly total into flow context and use the mustache template in a template node to create a html document and use a blue template node to show in a dashboard.
---
### Author:  [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [31 May 2024 09:10 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/14 "2024-05-31T09:10:12Z")
Are you using dashboard v1 or v2 or http-in/response ?
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 09:53 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/15 "2024-05-31T09:53:38Z")
dashboard v1
I got it to work now by using ``
Not the most elegant way, but will do for now, will try to use @bakman2 script to enhance the flow.
thanks for all the inputs.
```auto
| 11:00 to 12:00 | 0 | 0 | 1620 | 0 | 61 | 0 | 0 | 0 | 1090 |
0 | 0 | 0 | 2970 | 2971 | 0 | 0 | 0 | 0 | 0 |
```
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 May 2024 09:58 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/16 "2024-05-31T09:58:24Z")
So if you had supplied the mysql hourly data and the mustache template, I would of provides an example.
You can do it all in the ui-template using ng-repeat also.
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 10:59 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/17 "2024-05-31T10:59:10Z")
I am looking forward to the right way of approaching this
Sorry, the flow already has a makeshift solution, hope it will not hinder your solution.
```auto
[{"id":"84f944cb1b590ce7","type":"debug","z":"47da0e9a083f3b25","name":"debug 2556","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":3000,"y":1400,"wires":[]},{"id":"3ada0b7261e2139d","type":"inject","z":"47da0e9a083f3b25","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"any_value(datetime)\":\"2024-05-31T08:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2585,\"m03\":0,\"m04\":703,\"m05\":0,\"m06\":0,\"m07\":922,\"m08\":13490,\"m09\":0,\"m10\":0,\"m11\":41,\"m22\":4402,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":3037,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T09:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1687,\"m03\":0,\"m04\":609,\"m05\":0,\"m06\":0,\"m07\":869,\"m08\":10982,\"m09\":0,\"m10\":0,\"m11\":84,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6595,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T02:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2215,\"m03\":738,\"m04\":43,\"m05\":74,\"m06\":72,\"m07\":0,\"m08\":0,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T03:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3600,\"m03\":0,\"m04\":140,\"m05\":1028,\"m06\":985,\"m07\":2,\"m08\":1,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":5428,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":5408,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T04:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3313,\"m03\":309,\"m04\":284,\"m05\":612,\"m06\":598,\"m07\":24,\"m08\":7,\"m09\":0,\"m10\":0,\"m11\":93,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T05:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1769,\"m03\":0,\"m04\":221,\"m05\":0,\"m06\":0,\"m07\":7,\"m08\":3082,\"m09\":0,\"m10\":0,\"m11\":60,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T06:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3317,\"m03\":0,\"m04\":194,\"m05\":0,\"m06\":0,\"m07\":521,\"m08\":3305,\"m09\":0,\"m10\":0,\"m11\":157,\"m22\":6342,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6220,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T07:31:01.000Z\",\"m00\":0,\"m01\":0,\"m02\":1557,\"m03\":0,\"m04\":247,\"m05\":0,\"m06\":0,\"m07\":181,\"m08\":11465,\"m09\":0,\"m10\":0,\"m11\":131,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6251,\"m18\":0}]]","payloadType":"json","x":2820,"y":1490,"wires":[["be38e1647d24beb5","81c7dda281817942","e18ac6e3f6f5043b","952d1349bdfd13b9","fa77f291ecc7cd3e","f22134dd41cdffe1","94f3b9ac57a7b752","9fe5f9df2ea409a2","e0b94aeef9071993","e23ec10a143b1b4c","84f944cb1b590ce7"]]},{"id":"be38e1647d24beb5","type":"function","z":"47da0e9a083f3b25","name":"H1","func":"flow.set(\"h1m00\", msg.payload[0][0].m00);\nflow.set(\"h1m01\", msg.payload[0][0].m01);\nflow.set(\"h1m02\", msg.payload[0][0].m02);\nflow.set(\"h1m03\", msg.payload[0][0].m03);\nflow.set(\"h1m04\", msg.payload[0][0].m04);\nflow.set(\"h1m05\", msg.payload[0][0].m05);\nflow.set(\"h1m06\", msg.payload[0][0].m06);\nflow.set(\"h1m07\", msg.payload[0][0].m07);\nflow.set(\"h1m08\", msg.payload[0][0].m08);\nflow.set(\"h1m09\", msg.payload[0][0].m09);\nflow.set(\"h1m10\", msg.payload[0][0].m10);\nflow.set(\"h1m11\", msg.payload[0][0].m11);\nflow.set(\"h1m22\", msg.payload[0][0].m22);\nflow.set(\"h1m23\", msg.payload[0][0].m23);\nflow.set(\"h1m14\", msg.payload[0][0].m14);\nflow.set(\"h1m15\", msg.payload[0][0].m15);\nflow.set(\"h1m16\", msg.payload[0][0].m16);\nflow.set(\"h1m21\", msg.payload[0][0].m21);\nflow.set(\"h1m18\", msg.payload[0][0].m18);\nflow.set(\"h1m19\", msg.payload[0][0].m19);\nflow.set(\"h1m20\", msg.payload[0][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1580,"wires":[[]]},{"id":"9fe5f9df2ea409a2","type":"function","z":"47da0e9a083f3b25","name":"H2","func":"flow.set(\"h2m00\", msg.payload[1][0].m00);\nflow.set(\"h2m01\", msg.payload[1][0].m01);\nflow.set(\"h2m02\", msg.payload[1][0].m02);\nflow.set(\"h2m03\", msg.payload[1][0].m03);\nflow.set(\"h2m04\", msg.payload[1][0].m04);\nflow.set(\"h2m05\", msg.payload[1][0].m05);\nflow.set(\"h2m06\", msg.payload[1][0].m06);\nflow.set(\"h2m07\", msg.payload[1][0].m07);\nflow.set(\"h2m08\", msg.payload[1][0].m08);\nflow.set(\"h2m09\", msg.payload[1][0].m09);\nflow.set(\"h2m10\", msg.payload[1][0].m10);\nflow.set(\"h2m11\", msg.payload[1][0].m11);\nflow.set(\"h2m22\", msg.payload[1][0].m22);\nflow.set(\"h2m23\", msg.payload[1][0].m23);\nflow.set(\"h2m14\", msg.payload[1][0].m14);\nflow.set(\"h2m15\", msg.payload[1][0].m15);\nflow.set(\"h2m16\", msg.payload[1][0].m16);\nflow.set(\"h2m21\", msg.payload[1][0].m21);\nflow.set(\"h2m18\", msg.payload[1][0].m18);\nflow.set(\"h2m19\", msg.payload[1][0].m19);\nflow.set(\"h2m20\", msg.payload[1][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1624.2857142857144,"wires":[[]]},{"id":"f22134dd41cdffe1","type":"function","z":"47da0e9a083f3b25","name":"H3","func":"flow.set(\"h3m00\", msg.payload[2][0].m00);\nflow.set(\"h3m01\", msg.payload[2][0].m01);\nflow.set(\"h3m02\", msg.payload[2][0].m02);\nflow.set(\"h3m03\", msg.payload[2][0].m03);\nflow.set(\"h3m04\", msg.payload[2][0].m04);\nflow.set(\"h3m05\", msg.payload[2][0].m05);\nflow.set(\"h3m06\", msg.payload[2][0].m06);\nflow.set(\"h3m07\", msg.payload[2][0].m07);\nflow.set(\"h3m08\", msg.payload[2][0].m08);\nflow.set(\"h3m09\", msg.payload[2][0].m09);\nflow.set(\"h3m10\", msg.payload[2][0].m10);\nflow.set(\"h3m11\", msg.payload[2][0].m11);\nflow.set(\"h3m22\", msg.payload[2][0].m22);\nflow.set(\"h3m23\", msg.payload[2][0].m23);\nflow.set(\"h3m14\", msg.payload[2][0].m14);\nflow.set(\"h3m15\", msg.payload[2][0].m15);\nflow.set(\"h3m16\", msg.payload[2][0].m16);\nflow.set(\"h3m21\", msg.payload[2][0].m21);\nflow.set(\"h3m18\", msg.payload[2][0].m18);\nflow.set(\"h3m19\", msg.payload[2][0].m19);\nflow.set(\"h3m20\", msg.payload[2][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1668.5714285714287,"wires":[[]]},{"id":"94f3b9ac57a7b752","type":"function","z":"47da0e9a083f3b25","name":"H4","func":"flow.set(\"h4m00\", msg.payload[3][0].m00);\nflow.set(\"h4m01\", msg.payload[3][0].m01);\nflow.set(\"h4m02\", msg.payload[3][0].m02);\nflow.set(\"h4m03\", msg.payload[3][0].m03);\nflow.set(\"h4m04\", msg.payload[3][0].m04);\nflow.set(\"h4m05\", msg.payload[3][0].m05);\nflow.set(\"h4m06\", msg.payload[3][0].m06);\nflow.set(\"h4m07\", msg.payload[3][0].m07);\nflow.set(\"h4m08\", msg.payload[3][0].m08);\nflow.set(\"h4m09\", msg.payload[3][0].m09);\nflow.set(\"h4m10\", msg.payload[3][0].m10);\nflow.set(\"h4m11\", msg.payload[3][0].m11);\nflow.set(\"h4m22\", msg.payload[3][0].m22);\nflow.set(\"h4m23\", msg.payload[3][0].m23);\nflow.set(\"h4m14\", msg.payload[3][0].m14);\nflow.set(\"h4m15\", msg.payload[3][0].m15);\nflow.set(\"h4m16\", msg.payload[3][0].m16);\nflow.set(\"h4m21\", msg.payload[3][0].m21);\nflow.set(\"h4m18\", msg.payload[3][0].m18);\nflow.set(\"h4m19\", msg.payload[3][0].m19);\nflow.set(\"h4m20\", msg.payload[3][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1712.8571428571431,"wires":[[]]},{"id":"fa77f291ecc7cd3e","type":"function","z":"47da0e9a083f3b25","name":"H5","func":"flow.set(\"h5m00\", msg.payload[4][0].m00);\nflow.set(\"h5m01\", msg.payload[4][0].m01);\nflow.set(\"h5m02\", msg.payload[4][0].m02);\nflow.set(\"h5m03\", msg.payload[4][0].m03);\nflow.set(\"h5m04\", msg.payload[4][0].m04);\nflow.set(\"h5m05\", msg.payload[4][0].m05);\nflow.set(\"h5m06\", msg.payload[4][0].m06);\nflow.set(\"h5m07\", msg.payload[4][0].m07);\nflow.set(\"h5m08\", msg.payload[4][0].m08);\nflow.set(\"h5m09\", msg.payload[4][0].m09);\nflow.set(\"h5m10\", msg.payload[4][0].m10);\nflow.set(\"h5m11\", msg.payload[4][0].m11);\nflow.set(\"h5m22\", msg.payload[4][0].m22);\nflow.set(\"h5m23\", msg.payload[4][0].m23);\nflow.set(\"h5m14\", msg.payload[4][0].m14);\nflow.set(\"h5m15\", msg.payload[4][0].m15);\nflow.set(\"h5m16\", msg.payload[4][0].m16);\nflow.set(\"h5m21\", msg.payload[4][0].m21);\nflow.set(\"h5m18\", msg.payload[4][0].m18);\nflow.set(\"h5m19\", msg.payload[4][0].m19);\nflow.set(\"h5m20\", msg.payload[4][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1757.1428571428573,"wires":[[]]},{"id":"952d1349bdfd13b9","type":"function","z":"47da0e9a083f3b25","name":"H6","func":"flow.set(\"h6m00\", msg.payload[5][0].m00);\nflow.set(\"h6m01\", msg.payload[5][0].m01);\nflow.set(\"h6m02\", msg.payload[5][0].m02);\nflow.set(\"h6m03\", msg.payload[5][0].m03);\nflow.set(\"h6m04\", msg.payload[5][0].m04);\nflow.set(\"h6m05\", msg.payload[5][0].m05);\nflow.set(\"h6m06\", msg.payload[5][0].m06);\nflow.set(\"h6m07\", msg.payload[5][0].m07);\nflow.set(\"h6m08\", msg.payload[5][0].m08);\nflow.set(\"h6m09\", msg.payload[5][0].m09);\nflow.set(\"h6m10\", msg.payload[5][0].m10);\nflow.set(\"h6m11\", msg.payload[5][0].m11);\nflow.set(\"h6m22\", msg.payload[5][0].m22);\nflow.set(\"h6m23\", msg.payload[5][0].m23);\nflow.set(\"h6m14\", msg.payload[5][0].m14);\nflow.set(\"h6m15\", msg.payload[5][0].m15);\nflow.set(\"h6m16\", msg.payload[5][0].m16);\nflow.set(\"h6m21\", msg.payload[5][0].m21);\nflow.set(\"h6m18\", msg.payload[5][0].m18);\nflow.set(\"h6m19\", msg.payload[5][0].m19);\nflow.set(\"h6m20\", msg.payload[5][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1801.4285714285716,"wires":[[]]},{"id":"81c7dda281817942","type":"function","z":"47da0e9a083f3b25","name":"H7","func":"flow.set(\"h7m00\", msg.payload[6][0].m00);\nflow.set(\"h7m01\", msg.payload[6][0].m01);\nflow.set(\"h7m02\", msg.payload[6][0].m02);\nflow.set(\"h7m03\", msg.payload[6][0].m03);\nflow.set(\"h7m04\", msg.payload[6][0].m04);\nflow.set(\"h7m05\", msg.payload[6][0].m05);\nflow.set(\"h7m06\", msg.payload[6][0].m06);\nflow.set(\"h7m07\", msg.payload[6][0].m07);\nflow.set(\"h7m08\", msg.payload[6][0].m08);\nflow.set(\"h7m09\", msg.payload[6][0].m09);\nflow.set(\"h7m10\", msg.payload[6][0].m10);\nflow.set(\"h7m11\", msg.payload[6][0].m11);\nflow.set(\"h7m22\", msg.payload[6][0].m22);\nflow.set(\"h7m23\", msg.payload[6][0].m23);\nflow.set(\"h7m14\", msg.payload[6][0].m14);\nflow.set(\"h7m15\", msg.payload[6][0].m15);\nflow.set(\"h7m16\", msg.payload[6][0].m16);\nflow.set(\"h7m21\", msg.payload[6][0].m21);\nflow.set(\"h7m18\", msg.payload[6][0].m18);\nflow.set(\"h7m19\", msg.payload[6][0].m19);\nflow.set(\"h7m20\", msg.payload[6][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1845.714285714286,"wires":[[]]},{"id":"e18ac6e3f6f5043b","type":"function","z":"47da0e9a083f3b25","name":"H8","func":"flow.set(\"h8m00\", msg.payload[7][0].m00);\nflow.set(\"h8m01\", msg.payload[7][0].m01);\nflow.set(\"h8m02\", msg.payload[7][0].m02);\nflow.set(\"h8m03\", msg.payload[7][0].m03);\nflow.set(\"h8m04\", msg.payload[7][0].m04);\nflow.set(\"h8m05\", msg.payload[7][0].m05);\nflow.set(\"h8m06\", msg.payload[7][0].m06);\nflow.set(\"h8m07\", msg.payload[7][0].m07);\nflow.set(\"h8m08\", msg.payload[7][0].m08);\nflow.set(\"h8m09\", msg.payload[7][0].m09);\nflow.set(\"h8m10\", msg.payload[7][0].m10);\nflow.set(\"h8m11\", msg.payload[7][0].m11);\nflow.set(\"h8m22\", msg.payload[7][0].m22);\nflow.set(\"h8m23\", msg.payload[7][0].m23);\nflow.set(\"h8m14\", msg.payload[7][0].m14);\nflow.set(\"h8m15\", msg.payload[7][0].m15);\nflow.set(\"h8m16\", msg.payload[7][0].m16);\nflow.set(\"h8m21\", msg.payload[7][0].m21);\nflow.set(\"h8m18\", msg.payload[7][0].m18);\nflow.set(\"h8m19\", msg.payload[7][0].m19);\nflow.set(\"h8m20\", msg.payload[7][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1890,"wires":[[]]},{"id":"f060cc5a2a2af6c0","type":"template","z":"47da0e9a083f3b25","name":"HTML HISTORY","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n \n \n \n \n\n \n \n \n | {{flow.plc_times}} | \n {{flow.mac.0}} | {{flow.mac.1}} | {{flow.mac.2}} | {{flow.mac.3}} | \n {{flow.mac.4}} | {{flow.mac.5}} | {{flow.mac.6}} | {{flow.mac.7}} | \n {{flow.mac.8}} | {{flow.mac.9}} | {{flow.mac.10}} | {{flow.mac.11}} | \n {{flow.mac.22}} | {{flow.mac.21}} | {{flow.mac.20}} | {{flow.mac.15}} | \n {{flow.mac.16}} | {{flow.mac.18}} | {{flow.mac.23}} | \n
\n \n \n | \n | | | | \n | | | | \n | | | | \n | | | | \n | | | \n
\n\n {{{flow.tr1}}}\n {{{flow.hr1}}} | {{{flow.h1m00}}} | {{{flow.h1m01}}} | {{{flow.h1m02}}} | {{{flow.h1m03}}} | {{{flow.h1m04}}} | {{{flow.h1m05}}} | {{{flow.h1m06}}} | {{{flow.h1m07}}} | {{{flow.h1m08}}} | \n {{{flow.h1m09}}} | {{{flow.h1m10}}} | {{{flow.h1m11}}} | {{{flow.h1m22}}} | {{{flow.h1m21}}} | {{{flow.h1m20}}} | {{{flow.h1m15}}} | {{{flow.h1m16}}} | {{{flow.h1m18}}} | {{{flow.h1m23}}} | \n \n {{{flow.tr2}}}\n {{{flow.hr2}}} | {{{flow.h2m00}}} | {{{flow.h2m01}}} | {{{flow.h2m02}}} | {{{flow.h2m03}}} | {{{flow.h2m04}}} | {{{flow.h2m05}}} | {{{flow.h2m06}}} | {{{flow.h2m07}}} | {{{flow.h2m08}}} | \n {{{flow.h2m09}}} | {{{flow.h2m10}}} | {{{flow.h2m11}}} | {{{flow.h2m22}}} | {{{flow.h2m21}}} | {{{flow.h2m20}}} | {{{flow.h2m15}}} | {{{flow.h2m16}}} | {{{flow.h2m18}}} | {{{flow.h3m23}}} | \n \n {{{flow.tr3}}}\n {{{flow.hr3}}} | {{{flow.h3m00}}} | {{{flow.h3m01}}} | {{{flow.h3m02}}} | {{{flow.h3m03}}} | {{{flow.h3m04}}} | {{{flow.h3m05}}} | {{{flow.h3m06}}} | {{{flow.h3m07}}} | {{{flow.h3m08}}} | \n {{{flow.h3m09}}} | {{{flow.h3m10}}} | {{{flow.h3m11}}} | {{{flow.h3m22}}} | {{{flow.h3m21}}} | {{{flow.h3m20}}} | {{{flow.h3m15}}} | {{{flow.h3m16}}} | {{{flow.h3m18}}} | {{{flow.h3m23}}} | \n \n {{{flow.tr4}}}\n {{{flow.hr4}}} | {{{flow.h4m00}}} | {{{flow.h4m01}}} | {{{flow.h4m02}}} | {{{flow.h4m03}}} | {{{flow.h4m04}}} | {{{flow.h4m05}}} | {{{flow.h4m06}}} | {{{flow.h4m07}}} | {{{flow.h4m08}}} | \n {{{flow.h4m09}}} | {{{flow.h4m10}}} | {{{flow.h4m11}}} | {{{flow.h4m22}}} | {{{flow.h4m21}}} | {{{flow.h4m20}}} | {{{flow.h4m15}}} | {{{flow.h4m16}}} | {{{flow.h4m18}}} | {{{flow.h4m23}}} | \n \n {{{flow.tr5}}}\n {{{flow.hr5}}} | {{{flow.h5m00}}} | {{{flow.h5m01}}} | {{{flow.h5m02}}} | {{{flow.h5m03}}} | {{{flow.h5m04}}} | {{{flow.h5m05}}} | {{{flow.h5m06}}} | {{{flow.h5m07}}} | {{{flow.h5m08}}} | \n {{{flow.h5m09}}} | {{{flow.h5m10}}} | {{{flow.h5m11}}} | {{{flow.h5m22}}} | {{{flow.h5m21}}} | {{{flow.h5m20}}} | {{{flow.h5m15}}} | {{{flow.h5m16}}} | {{{flow.h5m18}}} | {{{flow.h5m23}}} | \n \n {{{flow.tr6}}}\n {{{flow.hr6}}} | {{{flow.h6m00}}} | {{{flow.h6m01}}} | {{{flow.h6m02}}} | {{{flow.h6m03}}} | {{{flow.h6m04}}} | {{{flow.h6m05}}} | {{{flow.h6m06}}} | {{{flow.h6m07}}} | {{{flow.h6m08}}} | \n {{{flow.h6m09}}} | {{{flow.h6m10}}} | {{{flow.h6m11}}} | {{{flow.h6m22}}} | {{{flow.h6m21}}} | {{{flow.h6m20}}} | {{{flow.h6m15}}} | {{{flow.h6m16}}} | {{{flow.h6m18}}} | {{{flow.h6m23}}} | \n \n {{{flow.tr7}}}\n {{{flow.hr7}}} | {{{flow.h7m00}}} | {{{flow.h7m01}}} | {{{flow.h7m02}}} | {{{flow.h7m03}}} | {{{flow.h7m04}}} | {{{flow.h7m05}}} | {{{flow.h7m06}}} | {{{flow.h7m07}}} | {{{flow.h7m08}}} | \n {{{flow.h7m09}}} | {{{flow.h7m10}}} | {{{flow.h7m11}}} | {{{flow.h7m22}}} | {{{flow.h7m21}}} | {{{flow.h7m20}}} | {{{flow.h7m15}}} | {{{flow.h7m16}}} | {{{flow.h7m18}}} | {{{flow.h7m23}}} | \n \n {{{flow.tr8}}}\n {{{flow.hr8}}} | {{{flow.h8m00}}} | {{{flow.h8m01}}} | {{{flow.h8m02}}} | {{{flow.h8m03}}} | {{{flow.h8m04}}} | {{{flow.h8m05}}} | {{{flow.h8m06}}} | {{{flow.h8m07}}} | {{{flow.h8m08}}} | \n {{{flow.h8m09}}} | {{{flow.h8m10}}} | {{{flow.h8m11}}} | {{{flow.h8m22}}} | {{{flow.h8m21}}} | {{{flow.h8m20}}} | {{{flow.h8m15}}} | {{{flow.h8m16}}} | {{{flow.h8m18}}} | {{{flow.h8m23}}} | \n \n \n\n\n \n \n \n \n \n
\n \n \n ","output":"str","x":3200,"y":1490,"wires":[["02495c86a269f20d"]]},{"id":"02495c86a269f20d","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"History1","order":6,"width":"44","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3370,"y":1490,"wires":[[]]},{"id":"e0b94aeef9071993","type":"delay","z":"47da0e9a083f3b25","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":3020,"y":1490,"wires":[["f060cc5a2a2af6c0"]]},{"id":"e23ec10a143b1b4c","type":"function","z":"47da0e9a083f3b25","name":"Current Hr","func":"flow.set(\"tr1\", \"\");\nflow.set(\"tr2\", \"
\");\nflow.set(\"tr3\", \"
\");\nflow.set(\"tr4\", \"
\");\nflow.set(\"tr5\", \"
\");\nflow.set(\"tr6\", \"
\");\nflow.set(\"tr7\", \"
\");\nflow.set(\"tr8\", \"
\");\n\nflow.set(\"hr1\",\"14:00 to 15:00\")\nflow.set(\"hr2\",\"15:00 to 16:00\")\nflow.set(\"hr3\",\"16:00 to 17:00\")\nflow.set(\"hr4\",\"09:00 to 10:00\")\nflow.set(\"hr5\",\"10:00 to 11:00\")\nflow.set(\"hr6\",\"11:00 to 12:00\")\nflow.set(\"hr7\",\"12:00 to 13:00\")\nflow.set(\"hr8\",\"13:00 to 14:00\")\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3030,"y":1540,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 May 2024 12:50 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/18 "2024-05-31T12:50:52Z")
Well that was messed up data and very confusing.
Was the data the hourly pull from a database or incoming data every minute? I took it as hourly
I rearranged the data to make it more usable, and converted the timestamps.
I added a style property for the row that matched the timestamp, which is set to a number but in reality would be set to timestamp.
Here is an example using ui-template, slimmed down for my ease (as still working half blind as reading glasses are kaput)
```auto
[{"id":"3ada0b7261e2139d","type":"inject","z":"d1395164b4eec73e","name":"every hour","props":[{"p":"payload"},{"p":"flow","v":"{\"one\":\"title 1\", \"two\": \"title2\", \"three\": \"title 3\"}","vt":"json"},{"p":"timestamp","v":"1717139840000","vt":"num"},{"p":"flow.width","v":"120px","vt":"str"},{"p":"table_data","v":"$$.payload.(\t $moment_obj := $moment($.\"any_value(datetime)\");\t {\t \"hr1\": $moment_obj.format(\"HH[:00 -]\") & $moment_obj.add(1 , \"hour\").format(\"HH[:00]\"),\t \"m00\": $.m00,\t \"m01\": $.m01,\t \"style\": $moment_obj.format(\"HH\") = $moment($$.timestamp).format(\"HH\") ? \"background-color:red;font-weight:900;\"\t }\t)","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"any_value(datetime)\":\"2024-05-31T08:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2585,\"m03\":0,\"m04\":703,\"m05\":0,\"m06\":0,\"m07\":922,\"m08\":13490,\"m09\":0,\"m10\":0,\"m11\":41,\"m22\":4402,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":3037,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T09:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1687,\"m03\":0,\"m04\":609,\"m05\":0,\"m06\":0,\"m07\":869,\"m08\":10982,\"m09\":0,\"m10\":0,\"m11\":84,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6595,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T02:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2215,\"m03\":738,\"m04\":43,\"m05\":74,\"m06\":72,\"m07\":0,\"m08\":0,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T03:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3600,\"m03\":0,\"m04\":140,\"m05\":1028,\"m06\":985,\"m07\":2,\"m08\":1,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":5428,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":5408,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T04:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3313,\"m03\":309,\"m04\":284,\"m05\":612,\"m06\":598,\"m07\":24,\"m08\":7,\"m09\":0,\"m10\":0,\"m11\":93,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T05:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1769,\"m03\":0,\"m04\":221,\"m05\":0,\"m06\":0,\"m07\":7,\"m08\":3082,\"m09\":0,\"m10\":0,\"m11\":60,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T06:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3317,\"m03\":0,\"m04\":194,\"m05\":0,\"m06\":0,\"m07\":521,\"m08\":3305,\"m09\":0,\"m10\":0,\"m11\":157,\"m22\":6342,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6220,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T07:31:01.000Z\",\"m00\":0,\"m01\":0,\"m02\":1557,\"m03\":0,\"m04\":247,\"m05\":0,\"m06\":0,\"m07\":181,\"m08\":11465,\"m09\":0,\"m10\":0,\"m11\":131,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6251,\"m18\":0}]]","payloadType":"json","x":120,"y":4530,"wires":[["84f944cb1b590ce7","02495c86a269f20d"]]},{"id":"84f944cb1b590ce7","type":"debug","z":"d1395164b4eec73e","name":"debug 2556","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":290,"y":4440,"wires":[]},{"id":"02495c86a269f20d","type":"ui_template","z":"d1395164b4eec73e","group":"bac5fc6c84fc7b33","name":"History1","order":6,"width":"20","height":"9","format":"\n | {{msg.flow.one}} | \n {{msg.flow.two}} | \n {{msg.flow.three}} | \n \n \n \n | \n | \n | \n
\n\n \n | {{row.hr1}} | \n {{row.m00}} | \n {{row.m01}} | \n
\n
\n \n ","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":300,"y":4540,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
p.s. Flow vars need to be moved to msg property before being sent to ui-template
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [31 May 2024 14:47 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/19 "2024-05-31T14:47:35Z")
> [@E1cid](#):
>
> was messed up data and very confusing
I tried my best.
> [@E1cid](#):
>
> incoming data every minute?
the current hour will be pulled every minute ( i use a time-range-switch) , other hour data will be stored in the flow.context and remain intact till it is recycled after 8 hours.
> [@E1cid](#):
>
> Here is an example using ui-template
it will take some time for me to understand how is it working.
definitely is an elegant solution. thank you.
will convert my flow to your logic and post here soon.
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [2 June 2024 14:43 UTC](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394/20 "2024-06-02T14:43:10Z")
> [@smanjunath211](#):
>
> will convert my flow to your logic and post here soon.
successfully adapted my flow to simplified solution given by @E1cid
however, could not understand why the current hour highlighting was not working until i added a moment node to add one hour.
the image below is at 20:10 Hrs Local time.
[Next page](https://discourse.nodered.org/t/html-table-dynamically-change-the-selected-row-font-color/88394.md?page=2)