javascript - Appending a table row with jQuery - Best Practices

Question

I have a table:

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

And I append a row to it as such:

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

This is a very basic example and a simple append. In my current project the table is a lot larger and making changes are more complicated.

Is there another way to approach this? I mean, if I make a change to my table, I need to go back to my JS file and make a change to the append too. Seems a little redundant. This might be a ridiculous question but I'm curious to know if there's a simplified approach.

score 2 · Accepted Answer

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

<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 数据，因此可以对您的应用进行多种设计

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

javascript - Appending a table row with jQuery - Best Practices

3 回答 3

Related

Reference