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

Appending a table row with jQuery - Best Practices

本文关键字：最佳 jQuery 追加 使用      更新时间：2023-09-26

我有一个表格：

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

我这样附加一行：

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

这是一个非常基本的示例和一个简单的附加。在我当前的项目中，表格要大得多，并且进行更改更加复杂。

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

  1. 使用客户端模板化。我更喜欢车把。所以你得到了一个模板，比如 

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

    包含在您页面中的某个地方。

  2. 使用 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 模板中。这种方法让你在追加方法中编写 HTML 时可以使用这种丑陋的语法，因为有时它很难阅读，比如

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

此外，由于您仅从服务器检索JSON数据，因此可以对应用程序进行多种设计。

$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 );
}

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

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

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

另一个需要考虑的概念是尽早修复列宽以防止回流（在 DOM 环境中何时发生回流？

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

相关文章：