XOOPS Web Application System (https://xoops.org)
Powered by You!
Highligt in tables
Category : Themes
| Published by alain01 on 30-Jan-2008 23:38
Hello, You often use tables in your pages, and sometimes the reading of many lines and columns is not not easy. There is a means very simple to make definitely more readable your tables. This method is ultra-simple, any Javascript line, completely integrated with your theme cause you use 2 well-known classes, even and odd.
| Ligne | Jour | Température (°C) | Pluviométrie (ml)
| Indice de confiance |
| 2 | Monday | 18 | 0 | 4 |
| 3 | Tuesday | 12 | 0 | 4 |
| 4 | Wednesday | 16 | 30 | 3 |
| 5 | Thurday | 19 | 20 | 3 |
See method below...
Method:
For each line of your table, c'est with saying, for each element HTML [ i]< tr>[/i ], write this:
<tr class="even" onmouseout="this.className='odd';" onmouseover="this.className='even';">
That's all!
There is a small alternative:
If you wish that the line be transformed at the time of your 1st mouseover, then remove in the < tr>, element "class=even".
Here, the result:
| Ligne | Jour | Température (°C) | Pluviométrie (ml)
| Indice de confiance |
| 2 | Lundi | 18 | 0 | 4 |
| 3 | Mardi | 12 | 0 | 4 |
| 4 | Mercredi | 16 | 30 | 3 |
| 5 | Jeudi | 19 | 20 | 3 |