个人中心
gpt4 book ai didi

javascript - 函数完成后显示 JavaScript 的结果

转载 作者：行者123 更新时间：2023-12-02 16:18:20 25 4
gpt4 key购买 nike

情况
下面的脚本更改表格布局。然而，由于数据量很大，有几秒钟我可以看到一个被压扁的表。

问题
如何在运行 JavaScript 或准备就绪后显示表格。 jsfiddle该fiddle数据量较小，因此不会出现上述问题。

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

感谢大家的评论和帮助。

最佳答案

是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 - 函数完成后显示 JavaScript 的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29381397/

25 4 0
文章推荐： javascript - 使用搜索建议
文章推荐： javascript - jQuery "or"运算符不适用于 mouseleave？
文章推荐： javascript - 显示/隐藏文本 JavaScript 错误
文章推荐： javascript - canPlayType 总是返回吗？我错过了什么吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com