我遇到了一个问题，比如在加载 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>我想要实现的是，一旦页面完全加载，导出按钮应该出现在 ui 上，即在加载表格后或仅包含表格。
在代码段中，它正确加载，因为在这里我静态定义了 JSON。在我的代码中，我正在进行 ajax 调用，因此当我进行调用时，按钮会在加载表之前出现在 UI 上。
隐藏按钮
<button id="exportBtn" type="button" style="display: none;" class="btn btn-primary btn-lg">Export</button>
添加表格后显示按钮
addTable(tableData)
$("#exportBtn").show();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句