jQuery表格行构建器
有一种使用jQuery构建DOM的可靠方法？ 看看这个代码的附加方法...
$.getJSON("api/test", function(data) {
$.each(data, function () {
$("#tests").append($('<tr><td><input type="radio" name="' + this["name"] + '"/><td>' + this["name"] + '</td><td>' + this["descr"] + '</td></tr>'));
});
});
我认为（或者至少我希望）有更好的方法。 你能重构这个更清晰吗？
看看模板插件。
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'方法，你可以做类似的事情
$.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(''));
}
);
编辑：修改了string.Format函数以采用基于名称的密钥。 现在，您的模板代码可以使用{name}，{descr}，而不是使用{0}，{1}。 该函数将尝试在传递给函数的参数中找到具有相同名称的属性。
另外，请看Rick Strahl的方法，看看它是否对你更有意义。
http://www.west-wind.com/WebLog/posts/300754.aspx
我不会在每个内部追加。 最好是使用stringbuilder或push到一个数组并使用.join（）追加一次
选择取决于您试图优化的浏览器。 由于屏幕回流，附加到DOM是非常有创意的，因此我会尽量减少调用.append的次数。
网上有很多性能比较，详细介绍了这两种选择的性能。 一个在这里。
数组连接的示例
$.getJSON("api/test",
function(data)
{
var rowsToAppend=[];
$.each(data, function ()
{
rowsToAppend.push( '<tr><td></td></tr>' );
}
$("#tests").append( rowsToAppend.join() );
}
);