Overwrite tbody content jQuery

Question

I have a input field how can I enter the count number.

First if I try enter the number 5, so I have five "tr" is good but if enter a new number example 4 so I have 9 "tr" and not 4. I like to overwrite the old state.

How can I make this?

Here my html code:

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

    <table id="event_table">
        <tbody>

        </tbody>
    </table>

Here my jQuery code:

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

});

Here my jsfiddle: http://jsfiddle.net/2cee8/

Hope someone can help me.

Answer 1

Just add

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

before the loop.

So full code will become:

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

});

Demo: http://jsfiddle.net/2cee8/1/

Answer 2

Regarding performance, this is better, concatenate a string, request DOM only once using .html():

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