JavaScript / jQuery performance

The other day I wrote a JavaScript for enabling and disabling of entire table rows with input elements. It does its job, but I'm not especially satisfied with the performance.

November 14th, 2009Filed under Web

I threw together an example, as the page itself isn't really for the public. Here's the JavaScript source, too.

Each table has its own heading where the number of maximum allowed simultaneously selected rows is given in a span. Upon selecting the last allowed row, the remaining unselected rows then gets disabled. In order to select other rows, one or more of the selected ones has to be deselected first.

What you also can see from the example page, the numbers of rows is vital to the script's performance. — Of course it is, I hear you shout. But this is only 24 rows, and those 24 rows cause severe performance issues. I think it takes more than a second and a half to perform the action in IE. JavaScript can do better, right..?

If you have any suggestions as to how I can improve this script's performance, I'm all ears. Maybe it has something to do with the selectors I'm using, or maybe it's something completely different?

Bonus question: How do I fix jQuery's change event for the <input type="checkbox" /> element in Internet Explorer? It fires on blur, not change.

Add your comment

You can format your comment using the following BBCodes:

[b]Bold text[/b]
Bold text
[i]Italic text[/i]
Italic text
[u]Underlined text[/u]
Underlined text
[url=http://haraldson.ch/]Link text[/url]
Link text
[url]http://haraldson.ch/[/url]
http://haraldson.ch/
[quote]Quoted text[/quote]

Quoted text

[code]// Code example[/code]
// Code example
[color=#FF00FF]Red text[/color]
[color=FF00FF]Red text[/color]
[color=red]Red text[/color]
Red text

this.is('me');

I'm a frontend engineer with strong passion for all the small details crucial for giving life to a design. Working in Keyteq, a progressive Norwegian web agency specializing in Online Business.