jQuery表行生成器

看看模板插件。

http://plugins.jquery.com/project/jquerytemplate

您的代码现在可以如下所示:,

$.getJSON("api/test", 
    function(data) 
    {
        var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>');
        $.each(data, function () 
        {
            $("#tests").append(t, this);
        }
    }
  );

编辑

正如redsquare正确指出的,如果您有大量的行,那么在每次迭代中进行DOM操作可能会非常慢。不要更改代码,除非您分析了代码并发现这个特定循环是瓶颈。

'string.Format' method from this post ,你可以这样做

$.getJSON("api/test", 
    function(data) 
    {
        var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>';
        var html = [];
        $.each(data, function () 
        {
            html.push(template.format(this));
        }
        $('#tests').append(html.join(''));
    }
  );

编辑: Modified the string.Format function 以获取基于名称的密钥。现在,模板代码可以使用{name}、{descr}而不是使用{0}、{1}。函数将尝试在传递给函数的参数中查找具有相同名称的属性。

http://www.west-wind.com/WebLog/posts/300754.aspx

我不会在每个文件中附加内容。最好使用stringbuilder或推送到数组并用.join()追加一次

reflows 因此,我会尽量减少调用.append的次数。

在web上有许多性能比较,详细讨论了这两个选项的性能。一 here .

数组联接示例

$.getJSON("api/test", 
    function(data) 
    {
        var rowsToAppend=[];

        $.each(data, function () 
        {
            rowsToAppend.push( '<tr><td></td></tr>' );
        }

        $("#tests").append( rowsToAppend.join() );
    }
  );