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 (9)

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

JayTeeSr said:

Greetings @CSSGuy,

Like @faiqfardian I preferred the check-box version of your row-locking solution. However, I couldn't get his jquery snippet to work; stuff highlighted, but would not un-highlight. (fyi: I'm using FFox 3.01)

So, I hacked-together various snippets from the web (mostly this site ;-) ) to produce this working, albeit, less attractive version.

But, perhaps it will help someone...

Enjoy,
JT

After replacing the word "radio" w/ "checkbox" throughout the HTML, replace all of the javascript w/ the following:

$(function(){

$(".pickme tbody tr:odd").addClass("odd");

$(".pickme tbody tr").hover(
function () {$(this).addClass("highlight"); },
function () {$(this).removeClass("highlight"); }
).click( function() {

//get the actual DOM checkbox
var chk_box = $(this).find("input")[0];

//get boolean (true/false) value
var is_checked = chk_box.checked;

//alert("checked =" + is_checked);
if (is_checked) {
//alert('checked gonna remove');
$(this).removeClass('selected');
chk_box.checked = false; //set it
} else {
//alert('unchecked gonna add');
$(this).addClass('selected');
chk_box.checked = true;
}
});

//what to do if someone clicks on the check-box directly?
$(".pickme tbody tr td input").click(function(evt) {

//again, get the boolean value of the box
var is_checked = $(this)[0].checked;

//alert("is_checked?: "+ is_checked);
if (is_checked) {
//alert('gonna add');
//this is gross: find the parent 'tr' element
$(this).parent().parent().addClass('selected');
}
else {
//alert('gonna remove');

//this is gross: find the parent 'tr' element
$(this).parent().parent().removeClass('selected');
}

//stop propagation of the checkbox event!
if (window.event && !window.event.cancelBubble) {
window.event.cancelBubble = "true";
} else {
evt.stopPropagation();
}
});

});

# July 22, 2009 11:11 PM

Ask the CSS Guy