Question

I have a function that reloads all the content inside a table.

Currently, the table collapses when table rows are removed and re-added.

Is there a way to keep the previous table size and to “release” it once the operation is complete ?

function loadValues() {

    $('#tableId tbody').empty(); // Table rows are being removed here

    $.post("page.php?action=getValues",
        {},
        function(dataT) {

            for ( var i in dataT) {

                var data = dataT[i];

                $('#tableId tbody').append(
                    '<tr>'
                        + '<td>data.id</td>'
                        + '<td>data.other</td>'
                    '</tr>'
                );
            }

        }
        ,"json"
    );

}

Answer 1

If you do this :

function loadValues() {
    $.post("page.php?action=getValues",
        {},
        function(dataT) {
            $('#tableId tbody').empty(); // Table rows are being removed here
            for ( var i in dataT) {
                var data = dataT[i]; 
                $('#tableId tbody').append(
                    '<tr>'
                        + '<td>data.id</td>'
                    '</tr>'
                );
            }
        }
        ,"json"
    );
}

The table won’t collapse. The reason is that the window isn’t updated while a user script is running. In your first version, the collapse was visible because the user script had to stop while waiting for the response of the server.

---

A detail if performance is needed and you add many rows : it’s more efficient to build a big html string and do only one append at the end. In this case I usually proceed like this :

function loadValues() {
    $.post("page.php?action=getValues",
        {},
        function(dataT) {
            var html = '';
            for ( var i in dataT) {
                var data = dataT[i]; 
                html += '<tr>'
                    + '<td>'+data.id+'</td>'
                '</tr>'
                ;
            }
            $('#tableId tbody').html(html);
        }
        ,"json"
    );
}

Then the DOM is changed only once.