CSS/HTML: Highlighting Table Rows By Using Mouse Event Handler and Row Detection

Highlighting Table Rows By Capturing Bubbled Event

Label Dimensions Price Size Color Type Comment

Brand A 200x300 $200,000.00 small white good 2 doors

Brand B 200x100 $1,100,300.00 medium yellow good 3 wheels

Brand C 1200x2100 $100,000.00 large white good 4 wheels

Brand D 20x210 $300.00 medium blue good 100 wheels

CSS Series 56x340 $2,300.00 large blue good crash-prone

Good Browser 23x30 $300.00 medium white good sometimes crash

OK Browser 56x340 $2,300.00 large red good bug free

XML Coder 256x1000 $232,300.00 large yellow good nice

Example 1 543x300 $122,111.00 medium yellow good expensive

Example 2 56x340 $2,300.00 medium green good noisy

Example 3 23x30 $2,300.00 large red good 9 wheels

Note:

The first and last columns is marked as "header" so they are not highlighted.

If you assign a background-color to a <tr>, that row will still be highlighted, and the original color preserved when the mouse is leaving the row. Example is on the row labeled Brand A.

If you assign a background-color to a <td>, that column will still be highlighted and the original color preserved when the mouse is leaving the row. Example is on the row labeled Brand B.

If you assign a style to a <tr>, that row will still be highlighted, and the original color preserved when the mouse is leaving the row. Example is on the row labeled Brand C.

If you assign a style to a <td>, that column will still be highlighted, and the original color preserved when the mouse is leaving the row. Example is on the row labeled Brand D.

Back

(C) F. Permadi

Label	Dimensions	Price	Size	Color	Type	Comment
Brand A	200x300	$200,000.00	small	white	good	2 doors
Brand B	200x100	$1,100,300.00	medium	yellow	good	3 wheels
Brand C	1200x2100	$100,000.00	large	white	good	4 wheels
Brand D	20x210	$300.00	medium	blue	good	100 wheels
CSS Series	56x340	$2,300.00	large	blue	good	crash-prone
Good Browser	23x30	$300.00	medium	white	good	sometimes crash
OK Browser	56x340	$2,300.00	large	red	good	bug free
XML Coder	256x1000	$232,300.00	large	yellow	good	nice
Example 1	543x300	$122,111.00	medium	yellow	good	expensive
Example 2	56x340	$2,300.00	medium	green	good	noisy
Example 3	23x30	$2,300.00	large	red	good	9 wheels