如何优化jquery脚本(表创建N行X 56列）

嗨，我有一个jquery脚本，它采用表模板并添加N行（N=[1…100]）作为第一个TR的克隆。然后，每行中的每个单元格都填充一些数据（并非所有单元格都始终填充），每个单元格都附加了"on clik"事件，在单元格悬停行、单元格、coll上突出显示。

我面临的问题是生成（时间）和可用性的优化（鼠标移动不平滑）

代码：

HTML模板表：

<table id='schedulerview' class='myGrid'>
      <colgroup id='col_0'></colgroup>
      <colgroup id='col_1'></colgroup>
      <colgroup id='col_2'></colgroup>
      <colgroup id='col_3'></colgroup>
      ....
      <colgroup id='col_55'></colgroup>
      <thead>
        <tr>
          <th>0</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          ....
          <th>51</th>
        </tr>
      </thead>
      <tbody>
        <tr id='template' style='display:none'>
          <td id='0' HID='W0_Y_I' class='scheddata'>Week 1</td>
          .....
          <td id='51' HID='W55_Y_I' class='scheddata'>Week 52</td>
        </tr>
      </tbody>
    </table>

CSS：

.litrow { background-color: #eee; }
.litcell { background-color: yellow; }

文件codeehind.js

$(document).ready(function () {
  //turn on row, cell, column highlight on hover
  $("table#schedulerview tbody").on('mouseenter', 'tr', function () {
        $(this).addClass('litrow');
    });
    $("table#schedulerview tbody").on('mouseleave', 'tr', function () {
        $(this).removeClass('litrow');
    });

    $("table#schedulerview tbody").on('mouseenter', 'td', function () {
        $(this).addClass('litcell');
        $("colgroup").eq($(this).index()).addClass("litrow");
    });
    $("table#schedulerview tbody").on('mouseleave', 'td', function () {
        $(this).removeClass('litcell');
        $("colgroup").eq($(this).index()).removeClass("litrow");
    });

    //function for getting data and create schedule table from template table
      getSchedule();
  });

getschedule函数：

function getSchedule() {
        var data = "{userid:'" + userid + "',year:" + year + "}";
    $.ajax({
        type: "POST",
        url: "/Scheduler.aspx/getSchedule",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (ret) {
            var areas = JSON.parse(ret.d.Areas);
            var schedule = JSON.parse(ret.d.Schedule);
           //remove all rows from table that are not template
            $('table#schedulerview tr.eventSchedule').remove();

           //create  row for each element from DB  - prepare matrix elementsXWeeks
            var $tr = $('#template');
            $.each(areas, function (i, x) {
            var $clone = $tr.clone();    
                $clone.css('display', 'block');
                $clone.attr('id', 'new_row_' + i);
                $clone.addClass('eventSchedule');
                $clone.children('td:first').text(x.AreaName);
                //for each cell in new row 
                $clone.children('td.scheddata').each(function () {
                    var $this = $(this);
                    var HID = $this.attr("HID").replace('_Y_', '_' + year + '_').replace('_I', '_' + x.IDObszaru);
                    $this.attr("HID", HID);
                });
                $tr.before($clone);
            });

            //fill in the matrix with scheduled data
            $.each(schedule, function (i, x) {
                $td = $("table#schedulerview td[HID='" + x.HID + "']");
                $td.addClass(x.Status);
                $td.attr("WeekNum", x.WeekNum);
                $td.attr("PlanID", x.Id);

                $td.parent().addClass('plannedrow');
            });
        },
        error: function (ret) {
            alert(ret.responseText);
        }
    });
}

getSchedule（）函数持续几秒钟，是否可以对其进行优化，使其更快？

更改：

我尝试了不同的行创建方法：

for (i = 0; i < areas.length; i++) {
            $lasttr = $("table#schedulerview tbody").append("<tr id='new_row_" + i + "' class='eventSchedule' ></tr>");
            $lasttr = $("table#schedulerview tbody tr#new_row_" + i);
            for (j = 0; j < 56; j++) {
                var sclass = "";
                if (j == 0)
                    $lasttr.append("<td>" + areas[i].AreaName + "</td>");
                if (j == 1)
                    $lasttr.append("<td>" + areas[i].AreaSubName + "</td>");
                if (j == 2)
                    $lasttr.append("<td>" + areas[i].AreaParentName + "</td>");
                if (j > 2) {
                    sclass = "'scheddata'";
                    k = j - 2;
                    $lasttr.append("<td class=" + sclass + " HID='W" + k + "_" + year + "_" + areas[i].AreaID + "'></td>");
                }
            }

        }

但速度还不够快，悬停的问题依然存在。（同样在使用css时：悬停伪类。