Making a Table Row clickable

Question

I wonder what the best way to make an entire tr clickable would be?

The most common (and only?) solution seems to be using JavaScript, by using onclick=\"javascript:

Answer 1

If your targeted browsers all support CSS Table display styles, you can use Javascript to wrap each row in an tag styled to function as a .

Here's some JS code using jQuery to make it happen: (jsfiddle)

$(function() {
  $('.table-linked').each(function() {
    var table, tbody;
    table = this;
    tbody = $('tbody', this);
    tbody.children().each(function() {
      var href, row;
      row = $(this);
      href = row.attr('data-href');
      $('').append(row).appendTo(table);
    });
    tbody.remove();
  });
});

This code will transform a table that looks like this:

    

        
a
1
        
b
2
    

Into this DOM structure in the browser:

        
        

    
a
1
    
    
b
1
    

Browsers don't seem to be capable of parsing this structure as HTML code (and needless to say it won't validate), it needs to be constructed using JS