情况
下面的脚本更改表格布局。然而，由于数据量很大，有几秒钟我可以看到一个被压扁的表。
问题
如何在运行 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/