javascript - 防止表格元素折叠

Question

我有一个函数可以重新加载 table 中的所有内容。

目前，当删除并重新添加表格行时，表格会折叠。

有没有办法保持以前的表大小并在操作完成后“释放”它？

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

如果你这样做:

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

table 不会折叠。原因是当用户脚本运行时窗口没有更新。在您的第一个版本中，崩溃是可见的，因为用户脚本必须在等待服务器响应时停止。

---

如果需要性能并且您添加了很多行，请详细说明:构建一个大的 html 字符串并在末尾只执行一个追加会更有效。在这种情况下，我通常会这样做:

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

然后 DOM 只改变一次。