CODEWITHSUNDEEP
jquerycsshtml-table
JonoB
JonoB

Reputation: 5887

Table row highlighting

Been scouring the net for the 'best' way to do table row highlighting.

Seems that the two main alternatives are:

1 Pure CSS: tr:hover

2 Css + Jquery:

$("table").delegate('td','mouseover mouseleave', function(e) {
  if (e.type == 'mouseover') {
    $(this).parent().addClass("tr-hover");
  }
  else {
    $(this).parent().removeClass("tr-hover");
  }
});

I have no idea what is considered best practise these days. As far as I can ascertain, its only IE7 that doesn't work properly with the Pure CSS option.

Or, are there other alternatives that I should consider?

Upvotes: 1

Views: 258

Answers (1)

Rob W
Rob W

Reputation: 348972

Use the CSS :hover method. It does also work in IE7+, provided that a DOCTYPE is set. This statement is backed-up by this MSDN article.

... improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies.
  . . .
We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>

According to personal tests (and by this source), standards-compliant mode is not activated when:

  • No DOCTYPE is set
    or when the DOCTYPE is set, and:
  • A versionless HTML is specified.
  • A HTML version lower than 4.x is specified (including non-existent lower versions, such as 3.99)
  • HTML 4 is specified (instead of 4.x) without URL. http:// is also valid, other protocols are invalid.
  • HTML 4.x Transitional or HTML 4.x Frameset without an URL part.

It is activated with all other DOCTYPEs, including XHTML, XML, and unknown ones.

Pros for CSS:

  • It's much more efficient than jQuery: no event listeners are involved, the behaviour is defined right after the definition of the CSS rule (jQuery requires the library and a function call).
  • It also works when JavaScript is disabled.

Pros for jQuery:

  • It also works in IE6-
    (this markup is not that critical, so this would not have a big weight. Who is using IE6 by the way?).

Upvotes: 4

Related Questions