Wiring up javascript events and passing parameters

Question

A bit background: I've got a page with a table and a number of checkboxes. The page is generated in asp.net. Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).

Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.

so you have something like:

<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>

Not much of a surprise there then.

Ok so the here's the problem: So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.

I know what you're thinking: easy just call that Javascript function highlightRow. But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)

So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.

---

(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)

---

Update: Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)

The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.

In the end went with a bit of a hack:

// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
    if (element.click)
    {
        element.click();
    }
    else
    {
        // We don't have a click on this element, so add our own.
        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        element.dispatchEvent(evt);
    }
}

Think that could be somewhat improved but it does the business for now.

Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.

Answer 1

I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.

Answer 2

you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.

thats how you can define alternate row color for the table using jquery

$("table tr:nth-child(even)").addClass("striped");

<style>
.striped{
 background-color:#efefef;
}
</style>

Answer 3

If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?

I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.

I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.

I would also use jQuery to easily create the js-code.

I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.