覆盖 tbody 内容 jQuery答案

【问题标题】：Overwrite tbody content jQuery覆盖 tbody 内容 jQuery
【发布时间】：2014-04-27 19:46:05
【问题描述】：

我有一个输入字段，如何输入计数。

首先，如果我尝试输入数字 5，那么我有五个“tr”很好，但如果输入一个新数字示例 4，那么我有 9 个“tr”而不是 4。我喜欢覆盖旧状态。

我该怎么做？

这是我的html代码：

<input type="text" id="count">

    <table id="event_table">
        <tbody>

        </tbody>
    </table>

这里是我的 jQuery 代码：

jQuery("#count").change(function() {

    var count = jQuery('#count').val();

    //built table
    var tr_var = "<tr><td>date</td><td>time</td><td>icons</td></tr>";

    for (var i = 0; i < count; i++ ) {
        jQuery("#event_table tbody").append(tr_var);
    }

});

这是我的 jsfiddle：http://jsfiddle.net/2cee8/

希望有人可以帮助我。

【问题讨论】：

你不应该在循环内使用 append() 来提高性能。最好在循环中连接一个字符串并使用.html(theStringHtml) oustide 循环。如果你有 5 个元素，没关系，如果你有 100 个元素，那就更好了

标签： jquery html-table overwrite

【解决方案1】：

关于性能，这样更好，连接一个字符串，使用.html()请求一次DOM：

jQuery("#count").change(function () {

    var count = jQuery('#count').val();
    //built table
    var tr_var = "";

    for (var i = 0; i < count; i++) {
        tr_var += "<tr><td>date</td><td>time</td><td>icons</td></tr>";
    }

    jQuery("#event_table tbody").html(tr_var);
});

【讨论】：

【解决方案2】：

只需添加

jQuery("#event_table tbody").empty();

在循环之前。

所以完整的代码会变成：

jQuery("#count").change(function () {

    var count = jQuery('#count').val();
    jQuery("#event_table tbody").empty();
    //built table
    var tr_var = "<tr><td>date</td><td>time</td><td>icons</td></tr>";

    for (var i = 0; i < count; i++) {
        jQuery("#event_table tbody").append(tr_var);
    }

});

演示：http://jsfiddle.net/2cee8/1/

【讨论】：