• Choose a category
• All
• Classic-Fiction

By Root 1135 0

dissatisfied with this, some users also want to be able to select continuous rows by using the Shift key—just like in their desktop applications.

Selecting a Column of Checkboxes

Dealing with columns of data is much trickier than dealing with rows of data. They may appear closely tied when viewed together onscreen, but when it comes to the DOM they’re merely distant relatives. There are no handy next or previous functions we can hook into.

Naturally, jQuery can help us out. Thanks to its sophisticated selector engine, we can do whatever we want—it might just require a bit of thinking. To start with, we know we need to grab the table; in our case, it’s good old #celebs.

Next, we want to retrieve the table rows: #celebs tr, and then the first columns of each row #celebs tr td:nth-child(1). Finally, we make sure we’re only selecting checkboxes: #celebs tr td:nth-child(1) :checkbox. That’s quite the selector! How far we’ve come from our simple $('tr:odd').

We place another checkbox (with an id of checker) in the thead of our table. Because it’s in a th rather than a td, our selector will ignore it. We can attach a click handler to this to turn all the checkboxes on and off:

chapter_08/10_select_column_checkboxes/script.js (excerpt)

var chkSelector = 'tr td:nth-child(1) :checkbox';

$('#checker').click(function() {

$('#celebs ' + chkSelector)

.attr('checked', $(this).attr('checked'));

});

Shift-selecting Checkboxes

All on or all off is one thing … but our client now has high expectations of us. He demands that he be able to Shift+Click on checkboxes to select a bunch at a time within a range of rows. Just like in his webmail client.

Shift-selecting presents some fun problems. For starters, how do we know if the user is pressing Shift? Luckily for us, jQuery events tell us! We can find out from an event the state of the Shift key by checking the Boolean property e.shiftKey. That was easy! How about finding out which row was clicked on? We can just jump up the DOM and find the parent row of the checkbox, and fetch its index using index. Another easy one.

Next, we have to know where the user last clicked, so we can have a start and end point for checking boxes. The easiest way for us to do this is to store each click in the table using the data method. That’s a lot of information we have, so let’s put it into practice:

chapter_08/10_select_column_checkboxes/script.js (excerpt)

$('#celebs ' + chkSelector).click(function(e) {

var $table = $(this).parents('table');

var lastRow = $table.data('lastRow');

var thisRow = $(this).parents('tr').index();

if (lastRow !== undefined && e.shiftKey) {

var numChecked = 0;

var start = lastRow < thisRow ? lastRow : thisRow;

var end = lastRow > thisRow ? lastRow : thisRow;

$table

.find(chkSelector)

.slice(start, end)

.attr('checked', true);

}

$table.data('lastRow', thisRow);

});

We spring into action only when there’s a lastRow value (it will be undefined the first time through, before we’ve stored a click value on the table), and the user is also holding down Shift.

With the source and destination rows in hand, we need to figure out which is further down the table, so we can make sure that the starting point is before the end point. Then we slice up our checkbox selection with jQuery’s slice method. With our freshly sliced jQuery selection in hand, we can finish it off by checking all the remaining checkboxes in the selection. Now you can easily select ranges of rows in a highly intuitive manner!

We’ve Made the A-list!

We’ve transformed the admin section of StarTrackr! from a horrible mess of poorly formatted data into a usable desktop-style application—and in the process transformed raw data into useful information. The ease with which jQuery lets us mold standard HTML elements into powerful application-like controls means that the holy grail of responsive, impressive, and accessible Rich Internet Applications is well within our grasp.

What’s truly awesome to note at this stage, is that in terms of the core jQuery library, almost all the functions we find