Question

我有一张桌子：

<table id="my-table" border="1">
    <tr>
        <td>Apples</td>
    </tr>
</table>

我向它添加了一行：

$('#my-table').append('<tr><td>Oranges</td></tr>');

这是一个非常基本的例子和一个简单的追加。在我目前的项目中，表格更大，更改更复杂。

还有另一种方法可以解决这个问题吗？我的意思是，如果我对我的表进行更改，我需要回到我的JS文件并对附加进行更改。似乎有点多余。这可能是一个荒谬的问题，但我很想知道是否有一种简化的方法。

Answer 1

使用客户端模板。我更喜欢把手。所以你有一个像

这样的模板

<script id="table-row-template" type="text/x-handlebars-template">
    <tr><td>{{name}}</td><td>{{second_name}}</td><td>{{age}}</td></tr>
</script>

页面中包含的某个地方。

使用AJAX从服务器获取数据并使用模板：

$.ajax({
    url: 'mysite.com/tableRowData',
    dataType: 'json',
    success: function(response) {
        var source   = $("#table-row-template").html();
        var template = Handlebars.compile(source);
        $('#myTable tbody').append(template(response)); // Notice tbody.
    }
});

通过这种方式，您可以将每个表的模板保存在不同的文件中，并保留HandleBars模板。当你在append方法中编写HTML时，这种方法可以让你使用这种丑陋的语法，因为有时它很难阅读，比如

      $('#myTable tbody').append('<tr><td><span class="..">...</span></td><td><img src="..."><span class="...">...</span></td>....</tr>');

此外，由于您只从服务器中检索JSON数据，因此可以对您的应用进行多种设计

Answer 2

$rowTpl  = $( '#row-tpl' );
$myTable = $( '#my-table' );

for( ... ) {

    var param1 = ... ,
        param2 = ... ,
        // Etc...

    $rowTpl.html( $rowTpl.html()
        .replace( '{{ param1 }}', param1 )
        .replace( '{{ param2 }}', param2 )
        // Etc...
    );

    $myTable.append( $rowTpl );
}

Answer 3

有很多细微的概念可以将行附加到大型表中，因为性能很快就会成为一个问题。随着新版浏览器的发布，一些最佳实践也在不断发展。

您可以查看各种技巧的有价值的基准比较：http://jsperf.com/append-table-rows/2，http://jsperf.com/building-a-big-table。

创建一个要克隆的模板，正如j08691在上面建议的那样，也许通过克隆你的案例中的现有行，肯定会有助于保持你的脚本简洁，并且明显比上面第二个链接中显示的其他方法更快。

要考虑的另一个概念是尽早修复列宽以防止回流（When does reflow happen in a DOM environment?）。

库和小部件为此提供了方便的方法，以及更复杂和强大的性能增强选项，例如jQuery数据表中的滚动加载（http://datatables.net/extras/scroller/）。

使用jQuery附加表行 - 最佳实践

3 个答案: