Question

I have a big table (about 500 rows and 7 columns).
My code just has to check the table cell which I click on (it adds class “reserved” to clicked cell, this class does some simple border manipulation).

It works smoothly on Firefox and Opera, but it sucks on Chrome (I mean I have to wait about a second before the cell’s border changes) – can you suggest me a way to fix it?

The first IFs are for some other checkings, but it’s just checks the state of this particular clicked cell.

$("td").click( function() 
{
    if($(this).attr('system') !=  1)
    {
        if($(this).attr("reserved") != "1" && $(this).attr("reserved") != "2")
        {
            if($(this).attr("_checked")=="1")
            {
                $(this).addClass("reserved"); // here it changes border color
            }

        }
}

Answer 1

You could try caching the selector:

$("td").click( function() 
{
    var $this = $(this);

    if($this.attr('system') !=  1)
    {
        if($this.attr("reserved") != "1" && $this.attr("reserved") != "2")
        {
            if($this.attr("_checked")=="1")
            {
                $this.addClass("reserved"); // here it changes border color
            }

        }
}