Josh asks the CSS Guy about row locking with jQuery (Ask the CSS Guy)

Josh asks the CSS Guy about row locking with jQuery

With regards to this article, Josh writes:

"Would it be possible for you to recreate this with jQuery and see how many lines of JS you can save in the process?"

Yes!

This is a direct jQuery replacement of this particular example.

The jQuery

I ditched all the home-grown functions, linked out to the jQuery-latest.js, then wrote the following bits:

$(document).ready(function() {
  $('.pickme tbody tr:odd').addClass('odd');
  $('.pickme tbody tr').hover(
    function() { $(this).addClass('highlight'); },
    function() { $(this).removeClass('highlight'); }
  ).click( function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected').find('input').attr('checked','checked');
  });
});

In English, this says:

When the page has finished loading the DOM...
add a class of 'odd' to every other row in the table...
then assign a hover behavior that consists of:
adding a class of 'highlight' to the row when hovered into...
and removing the class of 'highlight' when hovered away.
When any row is clicked...
remove the class of 'selected' from any other row that happens to have it...
then add class of 'selected' to the current row, while also checking it's radio button.

This is much shorter and easier to write for than the previous example. Compare the javascript written in the source code on the previous version to the jQuery version.

The usual warnings for using libraries still apply. If it's a single effect on your site, it is likely best and more concise to write out your functions from scratch, but if you are already using jQuery (or any other library) on your site, take advantage of it. Also, just because it's easy doesn't make it right - give consideration to whether a behavior should be applied at all.

# October 22, 2008 8:49 AM

Comments (8)

Yell said:

You can also replace the first line with "$( function() {" which shortens the code even more!

# October 23, 2008 10:58 AM

Yell said:

You can also replace the first line with "$( function() {" which shortens the code even more!

# October 23, 2008 11:01 AM

Raphael said:

Boy, that's quite an enhancement. With jQuery, you can achieve the same result, and let the framework do the hard job by itself, like it is intended to do. Congratulations, great job, I'll keep coming for more :D

# October 23, 2008 9:04 PM

Dan said:

Thanks for this article.

I've been playing around with jQuery for a while now, and I am quite impressed. It's my favourite JavaScript library right now. It is an excellent framework.

# October 25, 2008 1:54 PM

macdet said:

Wau. This will be on my new page!

Thx for it.

# November 29, 2008 4:05 PM

Web Design Bureau said:

This is one big fat useful tutorial!

# December 22, 2008 6:29 AM

faiqfardian said:

i really love your previous version of row locking and i want to rewrite it with jQuery too but i found that you've already made one.

i think it is better to using 'toggle' than 'click' for clicking row,
with this little modification, you may select more than one row n deselect it and also checked the check box and unchecked it

$(document).ready(function(){
$(".pickme tbody tr:odd").addClass("odd");
$(".pickme tbody tr").hover(
function () {$(this).addClass("highlight"); },
function () {$(this).removeClass("highlight"); }
).toggle(
function () { $(this).addClass("selected").find('input').attr('checked','checked'); },
function () { $(this).removeClass("selected").find('input').attr('checked',''); }
);
});

# February 1, 2009 6:52 AM

CSS Guy said:

@faiqfardian -

Thanks for posting that toggle version! Very helpful stuff. I haven't taken the time to learn all of the features of jQuery, but one can see how learning more about their tools can make the work more efficient. Many thanks.

# February 1, 2009 9:23 AM

Ask the CSS Guy