Question

场合
下面的脚本更改了表格布局。但是，由于数据量很大，我可以在几秒钟内看到压扁的表格。

问题
如何在运行JavaScript或准备好后显示表。 jsfiddle这个小提琴有少量数据，所以它没有显示上述问题。

HTML中的

<head>
<script type="text/javascript" src="settable.js"></script>
</head>

的JavaScript
*实际数据量包含800~1000行

$(document).ready(function () {

    var tbody = "#table-body";
    var row = $("#table-body tbody>tr");

    $("<div>", {
        class: "tablewrapper"
    }).insertBefore(tbody);
    $("<table>", {
        class: "header"
    }).appendTo($("<div>", {
        class: "headerwrapper"
    }).appendTo("div.tablewrapper"));
    $(tbody).appendTo($("<div>", {
        class: "bodywrapper"
    }).appendTo("div.tablewrapper"));
    $(tbody + ">thead").clone().val("").appendTo("table.header");
    $("table.header>tr").removeClass("header_hidden");
    $(tbody).find("thead th").empty();
    $(tbody).find("tbody td:nth-child(3)").addClass("lefty");
    $("<input>", {
        type: "text"
    }).attr("id", "search-criteria").appendTo($("<div>", {
        class: "s_box"
    }).insertAfter("div.bodywrapper"));
    $("<div>").attr("id", "count").appendTo("div.s_box");

    resizeTable();
    //var bodyTd = $("#table-body tr td");

    $(window).resize(resizeTable);

    //search function
    $("#search-criteria").on("keyup", function () {
        var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
            return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
        }).toLowerCase();
        //var row = $("#table-body tbody>tr");

        if (keyword !== "") {
            row.each(function () {

                var td_word = $(this).text().toLowerCase();
                //shorthand if function
                $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
            });
            var srowCount = row.filter(":visible").length;
            document.getElementById('count').innerHTML = srowCount;
            rowCount();
        } else {
            $("tr.s_empty").remove();
            row.show();
            document.getElementById('count').innerHTML = row.length;
        }

        resizeTable();
    });

//    var row = "#table-body tbody>tr";
    var srowCount = row.filter(":visible").length;
    document.getElementById('count').innerHTML = srowCount;

    function rowCount(srowCount) {
        if (srowCount === 0) {
            if (!row.last().hasClass('s_empty')) {
                $("#table-body tbody").last().append('<tr class="s_empty"><td colspan="5" style="text-align:center">Search not found</td></tr>');
            }
            $("tr.s_empty").show();
        } else {
            $("tr.s_empty").remove();
        }
    }

    function resizeTable() {
        //width adjustments
        $("#search-criteria").width($("div.headerwrapper").width() - 30);

        var tbody = $('#table-body');
        var thead = $('table.header');
        var tds = tbody.find('thead th');
        var ths = thead.find('th');
        tbody.width('100%');
        tds.css('width', '');
        thead.width(tbody.width());
        for (var i = 0; i < tds.length; i++) {
            tds.eq(i).css('width', ths.eq(i).outerWidth());
        }
        tbody.width('auto');
    }
});

感谢每个人的评论和帮助。

Answer 1

您可以将新表格添加到尚未附加到DOM或当前style="display:none"的div中。无论哪种方式，用户在完成向其添加行之前都无法看到该表。

var div = $("<div>", {class: "tablewrapper"});
var table = $("<table>").appendTo(div);
// Add all rows to table
...
div.appendBefore(tbody)

或

var div= $("<div>", {class: "tablewrapper", style: "display:none"});
...
div.css('display', 'block');

Answer 2

http://jsfiddle.net/b42vn2nh/97/是否证明了您的问题？如果是，http://jsfiddle.net/b42vn2nh/99/会解决您的问题吗？

在第一个链接中，我在渲染和使用

运行的javascript之间添加了3秒的延迟

$(document).ready(window.setTimeout(dostuff, 3000));

在第二个链接中，我添加了css规则

#table-body {
    width:100%;
}

#table-body thead {
    height:34px;
    line-height:32px;
    background-color:#1BA7F5;
    color:#FFF;
    width: 100%;
}

一旦你的javascript运行，仍然有一个闪存，因为我没有复制你的javascript添加的所有样式。

因此，简而言之，在呈现所有内容之前，javascript不会运行，如果表格很大，则需要一些时间。因此，请确保您的样式从一开始就包含在html文档的head中的css文件中。

功能完成后显示JavaScript的结果

2 个答案: