It's been some time since I posted on here and I thought this was cool, so I thought I'd share it with anyone who cares to use it.

I recently had a project that I was working on where the user is presented with a collection of records in a table format, and they can select rows in that table with a checkbox in each row. Like so:

	First Name	Last Name
	Fred	Flintstone
	Mickey	Mouse
	Daffy	Duck

Now imagine that table has near about 500 rows, and the user needs a convenient way to see which rows they've selected before they submit the form. To handle this I thought it'd be cool to highlight each row as the checkbox in that row was selected, so as the user scrolls up and down the page they can see which rows have been selected very easily. That and it just looks cool.

So I set up a simple class called selected that sets a backgound color for the TRs when they are checked, and then I wrote a little bit of javascript:

CSS:

tr.selected {
    background-color: #DAEFF1;
}

JavaScript:

function ToggleSelected(sender) {
    var tr = sender.parentNode;
    while (tr.nodeName.toLowerCase() != 'tr') { tr = tr.parentNode; }
    tr.setAttribute('className', (sender.checked ? 'selected' : ''));
    tr.setAttribute('class', (sender.checked ? 'selected' : ''));
}

You can see by reading through the JavaScript that all it does is find the containing TR element and toggle the class (or classname for IE) to "selected" or nothing depending on the status of the checkbox.

Once I had that function written, I just added a call to it in the onclick event in each checkbox, passing the checkbox itself as the sender: onclick="ToggleSelected(this)"
Now I have a nice highlight for each row when they are checked:

	First Name	Last Name
	Fred	Flintstone
	Mickey	Mouse
	Daffy	Duck

You can easily lift this little JavaScript function and use it on any page that has a table with checkboxes in the rows. Just don't forget to declare the selected class in your CSS.