html table row click,jquery - HTML table row link - Stack Overflow

Here is a jQuery plugin based on Nick's solution.

(function($) {

$.fn.linkWholeRows = function() {

// for each object

return this.each(function() {

// for each row

$(this).find('tbody tr').each(function() {

// get the first link's href

var href = $(this).find('td > a').attr('href');

// if none found then

if (href === undefined) {

return true; // continue

}

// wrap all cells with links that do not already have a link

$(this).children().not(':has(a)').each(function() {

$(this).contents().wrapAll('');

});

// apply the row's height to all links

// in case that the cells' content have different heights

var height = $(this).children().css('height');

$(this).find('td > a').each(function() {

$(this).css('height', height);

// do not forget to apply display:block to the links

// via css to make it work properly

});

}); // each row

}); // each object

};

})(jQuery);

Expects rows to be wrapped in tbody's. The height is set explicitly as Nick's original solution did not work for me on neighbouring cells with different heights.

Make sure to style a-elements as blocks. If you want to apply padding, apply it to the a-elements instead of table cells:

a {

display: block;

padding: 0.25em 0.5em;

}

tbody td { padding: 0; }

Simply call

$('#your-table').linkWholeRows();

Hope it helps. Cheers,

Richard