Question

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

首先，如果我尝试输入数字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/

希望有人可以帮助我。

Answer 1

添加

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/

Answer 2

关于性能，这是更好的，连接字符串，使用.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);
});

覆盖tbody内容jQuery

2 个答案: