我遇到了一个问题，比如我的导出按钮在加载 HTML 表之前渲染，这在 UI 上看起来不太好。
我想要实现的是我的按钮在表格渲染后加载或整个页面加载后内容应该出现。
$(document).ready(function() {
var tableData = [{
"CATEGORY CODE": "C001",
"CATEGORY NAME": "Beverages",
"QUANTITY": "1.0000",
"AMOUNT": 18
},
{
"CATEGORY CODE": "C002",
"CATEGORY NAME": "Shakes",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C003",
"CATEGORY NAME": "Juices",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C004",
"CATEGORY NAME": "Soups",
"QUANTITY": "1.0000",
"AMOUNT": 55
},
{
"CATEGORY CODE": "C005",
"CATEGORY NAME": "Cookies",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C006",
"CATEGORY NAME": "Buns",
"QUANTITY": "1.0000",
"AMOUNT": 21
},
{
"CATEGORY CODE": "C007",
"CATEGORY NAME": "Breads",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C008",
"CATEGORY NAME": "Rusks",
"QUANTITY": "1.0000",
"AMOUNT": 52
},
{
"CATEGORY CODE": "C009",
"CATEGORY NAME": "Biscuits",
"QUANTITY": "1.0000",
"AMOUNT": 38
},
{
"CATEGORY CODE": "C010",
"CATEGORY NAME": "Puff",
"QUANTITY": "4.0000",
"AMOUNT": 132
},
{
"CATEGORY CODE": "C011",
"CATEGORY NAME": "Savouries",
"QUANTITY": "0.1000",
"AMOUNT": 29
},
{
"CATEGORY CODE": "C012",
"CATEGORY NAME": "Cake",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C014",
"CATEGORY NAME": "IceCream",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C019",
"CATEGORY NAME": "Curry",
"QUANTITY": "1.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C021",
"CATEGORY NAME": "Starter",
"QUANTITY": "1.0000",
"AMOUNT": 165
},
{
"CATEGORY CODE": "C022",
"CATEGORY NAME": "Roti",
"QUANTITY": "1.0000",
"AMOUNT": 60
},
{
"CATEGORY CODE": "C023",
"CATEGORY NAME": "Chawal",
"QUANTITY": "1.0000",
"AMOUNT": 185
},
{
"CATEGORY CODE": "C024",
"CATEGORY NAME": "Dessert",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C026",
"CATEGORY NAME": "Soup",
"QUANTITY": "1.0000",
"AMOUNT": 100
},
{
"CATEGORY CODE": "C027",
"CATEGORY NAME": "Salad",
"QUANTITY": "1.0000",
"AMOUNT": 50
},
{
"CATEGORY CODE": "C028",
"CATEGORY NAME": "Set Menu",
"QUANTITY": "3.0000",
"AMOUNT": 1290
},
{
"CATEGORY CODE": "C029",
"CATEGORY NAME": "Pastry",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C030",
"CATEGORY NAME": "Packed Meals",
"QUANTITY": "1.0000",
"AMOUNT": 25
},
{
"CATEGORY CODE": "C031",
"CATEGORY NAME": "Packaging",
"QUANTITY": "1.0000",
"AMOUNT": 5
},
{
"CATEGORY CODE": "C034",
"CATEGORY NAME": "Bhath",
"QUANTITY": "1.0000",
"AMOUNT": 68
},
{
"CATEGORY CODE": "C036",
"CATEGORY NAME": "Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 10
},
{
"CATEGORY CODE": "C037",
"CATEGORY NAME": "Breakfast",
"QUANTITY": "5.0000",
"AMOUNT": 119
},
{
"CATEGORY CODE": "C038",
"CATEGORY NAME": "Evening Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C040",
"CATEGORY NAME": "Sandwich",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C042",
"CATEGORY NAME": "Burger",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C043",
"CATEGORY NAME": "Meals",
"QUANTITY": "1.0000",
"AMOUNT": 220
},
{
"CATEGORY CODE": "C044",
"CATEGORY NAME": "Curd",
"QUANTITY": "1.0000",
"AMOUNT": 12
},
{
"CATEGORY CODE": "C048",
"CATEGORY NAME": "Combo",
"QUANTITY": "2.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C051",
"CATEGORY NAME": "Silver Thali",
"QUANTITY": "1.0000",
"AMOUNT": 450
},
{
"CATEGORY CODE": "C052",
"CATEGORY NAME": "Sweets",
"QUANTITY": "1.0000",
"AMOUNT": 115
},
{
"CATEGORY CODE": "C054",
"CATEGORY NAME": "Instant Mixes",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C055",
"CATEGORY NAME": "RTE",
"QUANTITY": "1.0000",
"AMOUNT": 228
},
{
"CATEGORY CODE": "C057",
"CATEGORY NAME": "Spices",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C061",
"CATEGORY NAME": "Fast Food",
"QUANTITY": "1.0000",
"AMOUNT": 15
}
]
function addTable(tableData) {
var col = Object.keys(tableData[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableData[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("table1");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableData)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg">Export</button>
<div id="table1">
</div>我想要实现的是，一旦页面完全加载，导出按钮应该出现在用户界面上，即在表格加载之后或仅包含表格。
这里的代码片段加载正确，因为我在这里静态定义 JSON。在我的代码中，我正在进行 ajax 调用，因此当我进行该调用时，按钮会在加载表之前出现在 UI 上。
最佳答案
隐藏按钮
<button id="exportBtn" type="button" style="display: none;" class="btn btn-primary btn-lg">Export</button>
添加表格后显示按钮
addTable(tableData)
$("#exportBtn").show();
关于javascript - HTML 按钮在页面其他内容之前加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53630674/