jQuery can be unbelievably handy and concise
Adding selectable table rows in jQuery
The short bit of jQuery consists of the following:
The HTML for each button just needs to reference the chosen ID. A bit of CSS can make it look more like a button than a bog standard link if you're so inclined (I certainly was...)
The short bit of jQuery consists of the following:
- Adds a .click() function to any tr elements inside a tbody element to toggle the addition of the selected class whenever a row is clicked.
- Next, another .click() to give a link with the ID selectAll the ability to toggle all rows at once.
- Finally, one more .click() attached to the ID clearSelected that will deselect any rows currently selected.
$(document).ready(function() { $('tbody tr').click(function() { $(this).toggleClass('selected'); }); $('#selectAll').click(function() { $('tbody tr').toggleClass('selected'); }); $('#clearSelected').click(function() { $('tbody tr').removeClass('selected'); }); });
The HTML for each button just needs to reference the chosen ID. A bit of CSS can make it look more like a button than a bog standard link if you're so inclined (I certainly was...)
<a href='#' id='selectAll' class='button'>Select All</a> <a href='#' id='clearSelected' class='button'>Clear Selected</a>
Comments
Post a Comment