使用jQuery动态构建HTML表 [英] Building an HTML table on the fly using jQuery

问题描述

下面是我用来动态构建HTML表格的代码（使用从服务器收到的JSON数据）。

Below is the code I use to build an HTML table on the fly (using JSON data received from the server).

我显示动画等待（.gif ）数据加载时的图形。但是，当JavaScript函数构建表时，图形会冻结。起初，我很高兴能够实现这一目标（显示表格），我想现在我需要努力提高效率。至少我需要阻止动画图形冻结。我可以进入一个静态的加载显示，但我宁愿让这个方法有效。

I display an animated pleasewait (.gif) graphic while the data is loading. However, the graphic freezes while the JavaScript function is building the table. At first, I was just happy to make this happen (display the table), I guess now I need to work on efficiency. At the very least I need to stop the animated graphic from freezing. I can go to a static "Loading" display, but I would rather make this method work.

建议我等待显示？和效率？可能是建立桌子的更好方法？或许不是一张桌子，但其他一些桌子就像显示一样

Suggestions for my pleasewait display? And efficiency? Possibly a better way to build the table? Or maybe not a table, but some other "table" like display

var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
myTable +=  "<thead>" ;
myTable +=   "<tr>";
for (var i = 0; i < t.hdrs.length; i++) {
    myTable +=    "<th>"     + header +       "</th>";
}
myTable +=   "</tr>" ;
myTable +=  "</thead>" ;
myTable +=  "<tbody>" ;

for (var i = 0; i < t.data.length; i++) {
    myTable +=    '<tr>';
    for (var j = 0; j < t.hdrs.length; j++) {
        myTable += '<td>';
        if (t.data[i][t.hdrs[j]] == "") {
            myTable += "&nbsp;" ;
        }
        else {
            myTable += t.data[i][t.hdrs[j]] ;
        }
        myTable += "</td>";
    }
    myTable +=    "</tr>";
}
myTable +=  "</tbody>" ;
myTable += "</table>" ;

$("#result").append(myTable) ;
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;

推荐答案

你基本上想要设置循环以使它们屈服经常到其他线程。以下是本文中有关运行CPU密集型操作主题的示例代码没有冻结你的UI：

You basically want to set up your loops so they yield to other threads every so often. Here is some example code from this article on the topic of running CPU intensive operations without freezing your UI:

function doSomething (progressFn [, additional arguments]) {
    // Initialize a few things here...
    (function () {
        // Do a little bit of work here...
        if (continuation condition) {
            // Inform the application of the progress
            progressFn(value, total);
            // Process next chunk
            setTimeout(arguments.callee, 0);
        }
    })();
}

至于简化脚本中HTML的生成，如果你是使用jQuery，您可以尝试使用我的简单模板插件。它通过大幅减少你必须做的连接数来整理整个过程。在我最近进行了一些重构之后，它表现得相当不错，因为速度提升。这是一个例子（没有为你做所有工作！）：<​​/ p>

As far as simplifying the production of HTML in your script, if you're using jQuery, you might give my Simple Templates plug-in a try. It tidies up the process by cutting down drastically on the number of concatenations you have to do. It performs pretty well, too after I recently did some refactoring that resulted in a pretty big speed increase. Here's an example (without doing all of the work for you!):

var t = eval('(' + request + ')') ;
var templates = {
    tr : '<tr>#{row}</tr>',
    th : '<th>#{header}</th>',
    td : '<td>#{cell}</td>'
};
var table = '<table><thead><tr>';
$.each(t.hdrs, function (key, val) {
    table += $.tmpl(templates.th, {header: val});
});
...

这篇关于使用jQuery动态构建HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！