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

我有一张桌子：

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

苹果

我在它后面加了一行：

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

$（“#我的桌子”）.append（'Oranges'）；

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

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

使用客户端模板。我喜欢把手。所以你有一个模板，比如

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

这样，当您保留inly Handlebar模板时，您可以将每个表的模板保存在不同的文件中。这种方法使您在用append方法编写HTML时可以自由地使用这种难看的语法，因为有时很难阅读，比如

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

$（'myTable tbody'）。追加（'；

---

此外，由于您只从服务器检索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 );
}

您可以对各种技术进行一些有价值的基准比较：

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

另一个要考虑的概念是尽早固定列宽度以防止反射（）。

---

库和小部件为此提供了方便的方法，并提供了更复杂、更强大的性能增强选项，如在jQuery Datatables（）中滚动加载.

为什么这个问题被标记为

php

？第一个问题是你应该将它附加到tbody。我想如果我通过一个ajax调用附加一行，这会击中php脚本，可能有人会有其他方法来做这件事。第二个问题，我们不知道你在说什么。当然，如果你改变了某件事，你需要改变另一件事。在不知道自己在做什么的情况下，基本上不可能回答这个问题。您可能想使用客户端模板。为什么要使用ajax？只需将隐藏的模板存储在页面中，然后使用js获取它。@Virus721-再次检查代码并重新考虑您的评论。那么我在数据库中已经拥有的当前数据呢？我将如何处理它并将其从PHP数组放入模板中？这个过程非常棒，因为我通过ajax添加了它。。。但是，我不喜欢这种每次需要添加整个框架的理念，因为它可以用一种更简单的方法来完成。@Victor是否可以使用客户端模板来生成PHP循环生成的当前表（它的行是从PHP数组中的数据循环出来的）？与使用模板无关？我喜欢克隆一行并更新值的想法。这似乎是你给出的选项中最快最干净的方法。肖恩，我只是想考虑性能和简洁代码的最佳实践。我只知道你在上面介绍了什么，我觉得我不能参与模板引擎的可能使用。如果它在项目的其他环境中有用，那么这将是非常有意义的。

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