Guide 84 – Highlight items on LIST pages

My colleague Rubén asked me for some examples to highlight cells, rows, columns and groupings of cells, for information displayed on LIST pages and although there may be a multitude of ways to highlight the information, I have chosen 4 ways and have made this example to show them to you. to him and to you.

In almost all cases, the highlighting occurs when the mouse is positioned over the GRID table cells. You already know that the “hover” function is better not to use for computers that do not have a mouse.

It is a good reference example when you need to work with JQUERY.

Objetive:

When a LIST page shows many columns, the default presentation is unclear, so these examples serve to reinforce the interface and make the data visualization easier.

I have made 4 examples:

• version 1.- Show X and Y coordinates (rows and columns) by coloring the background of the cells.
• version 2.- Make the “zebra” type striping vertically and highlight the selected record.
• version 3.- Make the hatching according to the grouped cells, in order to better identify the information of the groups.
• version 4.- The same representation as version 1, but in LIST pages of the “master” and “detail” type.

DEMO: [https://fhumanes.com/guia84'>https://fhumanes.com/guia84 /](https://fhumanes.com/guia84'>https://fhumanes.com/guia84 /)

If you are interested in this topic, continue reading the article at this link .