表格导航和行选择

Question

我有一个 HTML 表格，其中包含大约 1000 行和 26 列。我正在使用 这个 jQuery 插件 在行之间导航并进行选择。

我的第一个问题是该插件工作正常，但是即使使用最新版本 (0.6.1)，在处理 1000 行时它也非常慢。

我的第二个问题是我想创建一个表示表中所选行的 JSON 对象。我编写了一个函数来执行此操作，但在这么大的表上它又太慢了。以下代码有效，但我想优化它：

$(document).bind("keyup", function(event) {
    var jsonText = "";
    var i = 0;
    var td_size = $("tr.selected td").size();
    jsonText += "{";
    for (i = 0; i < td_size; i++) {
        if (i < td_size - 1) {
            if (i == 0) {
                // Get link URL.
                jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).find("a").attr("href") + "\",";
            } else {
                jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).text() + "\",";
            }
        }
        else {
            jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).text() + "\"";
        }
    }
    jsonText += "}";
    $('#content').html('').append(jsonText);
});

请问有什么建议吗？

Answer 1

您可以做的一件事是优化您的 jQuery 选择器以帮助 Sizzler 更快地工作......
不是对所有文档的 keyup 进行投标，而是对特定 tr 的 keyup 进行投标怎么样？

$("tr.selected td").size(); // slow

$("table").find(".selected").find("td"); // probably faster

将选定的 tr 保存在循环之外，您要求 sizzler 通过循环 1000 行找到您的对象 26 次！

$("thead tr th").eq(i) // on every loop element? slow, try saving the information before the keyup event, they are not going anywhere are they?

所以可能这样的东西会更快：

var $allTrs = $("tr");
var $allHeads = $("thead tr th");

$allTrs.bind("keyup", function(event) {
    var jsonText = "";
    var i = 0;
    var $t = $(this),
        $alltds = $t.find("td"),
        td_size = $alltds.length();
    jsonText += "{";
    $.each($alltds, function(i){
      jsonText += "\"" + $allHeads.eq(i).text() + "\":\"";
      if (i == 0){ // you have a strange condition, will leave it up to u
           // append link
           jsonText += $(this).find("a").attr("href"); // i remove "" for better readability 
      }else{
          // append text
           jsonText += $(this).text();
      }

   });
jsonText += "}";


    $('#content').text(jsonText); // cheaper than html
});

我还没有测试过。

你也可以直接创建一个 json 对象（虽然不会影响速度），就像这样

var mynewjson = {};

然后在循环内：

mynewjson[name] = value;