[jQuery] Looking for a faster way

[Shawn]

(sorry, long post so I can explain the background some....)

I have a rather data intensive page that is pulling information via 
Ajax, and then populating the page.  I'm wondering if anyone can see a 
faster way to do this, as I'm seeing 12-15 second render times, and the 
page will be heavily used.

Basically, my page looks something like this (I'll post some code below):

Bob       0          0          0
Stan      1          1          0
           Vacation   Coding

There are many people rows (usually around 50ish), and the default veiw 
has 10 columns.  Each column represents a day.  The number represent how 
many tasks on that day, and the bit below the numbers show some summary 
information about the first task on that day.  A typical view will have 
a task for almost every employee/day.  (of course this is rather 
simplified, but it's enough to show the logic issues).

Creating the initial table is more than quick enough.  It's populating 
the tasks where the problem comes in.  The initial table has the 
employee ID set as the TR id's, and each day cell has a class of the 
date in question in the form "1-Jan-2007'.  So, I can then just match my 
task's employee ID to the row, and use the start/end date of the task to 
figure out which columns to populate. (that's what the inner while loop 
below is for)

Here's the code that does just this:

//Add the tasks to the schedule table
for (var x=0; x < json.results.length; x++) {
   var cur = json.results[x];
   var ds = new Date(cur.start_date);
   var de = new Date(cur.end_date);
   var curDay = new Date(ds);
   //if a task spans days, we need to add it to each day
   while (curDay && curDay < de) {
     var lbl = curDay.getDate() + "-" +
               schedule.shortMonth[curDay.getMonth()] + "-" +
               curDay.getFullYear();
     $(".crewSchedule tr[id='" + cur.employee_id + "'] ." + lbl)
       .each( function () {
         var q = parseInt($(this).children(".qty").text()) + 1;
         $(this).children(".qty").text(q);
         $(this).children(".detail").html(task.summary(cur));
       });

     curDay = new Date(curDay.setDate(curDay.getDate() + 1));
   }
}

//Task.summary function builds a simple table:
summary : function (json) {
   var t = "<table class=\"taskSummary\" id=\"" + json.task_id + "\">";

   var l1 = json.project || json.task_name;
   var l2 = json.company;
   var l3 = json.location;
   t += "<tr><td>" + l1 + "</td></tr>";
   t += "<tr><td>" + l2 + "</td></tr>";
   t += "<tr><td>" + l3 + "</td></tr>";
   t += "</table>";
   return t;
}

And a sample of the JSON looks like so:

{
   "task_id" : "3866",
   "task_name" : "TIME OFF REQUESTED",
   "employee_id" : "111",
   "employee" : "Smith, Bob",
   "start_date" : "19 Feb 2007",
   "end_date" : "24 Feb 2007",
   "job_number" : "",
   "company" : "",
   "project" : "",
   "color:" : "#99FF99",
   "location" : "",
   "note" : ""
}

I think the delays are resulting from the first bit of code (the for 
loop through the json results), and am looking for any jQuery tricks I 
might use to speed this up some.  I've already got this down to only 
looping once through the tasks (previous efforts required multiple 
loops).  Is my use of the .each() method making sense?  Will that slow 
things down?  Any ideas how I can avoid a .each?  There *should* only be 
one row for the employee... hmmm.. so far - I will have multiple rows in 
some special cases...  But I'm ignoring that issue for now.

I'll be playing with the code in the for loop there some - I can see 
ways to clean that up a little, but still would like a second opinion...

Oh, the delays are rendering times, not Ajax load times...

Any tips appreciated.  Even though I know this is such a broad request 
for a complex problem.  I'm hoping another set of eyes my see something 
I've missed.... Thanks.

Shawn