Question

在加载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上。

Answer 1

隐藏按钮

<button id="exportBtn" type="button" style="display: none;" class="btn btn-primary btn-lg">Export</button>

添加表格后显示按钮

addTable(tableData)
$("#exportBtn").show();

Answer 2

我正在使用Promise模拟AJAX调用。这应该为您工作。我在按钮元素中添加了id属性，先隐藏它，然后在获取JSON之后显示它。

因此，您要做的是先隐藏按钮，等待JSON通过AJAX请求加载，然后将其提取，然后使用jQuery的{{1}}方法显示按钮。

show()

Answer 3

首先，您可以隐藏onpage负载，然后再绑定表网格并显示btn，例如下面的示例

$(document).ready(function() {
$("#btnExport").hide();
  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);
  $("#btnExport").show();

});

<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" id="btnExport" class="btn btn-primary btn-lg">Export</button>
<div id="table1">

</div>

Answer 4

您可以最初隐藏按钮，然后在调用 addTable（）后显示该按钮。

请注意： 所有用JavaScript编写的代码。不必要的混合使用JavaScript和jQuery是不好的做法。

obj.click_on_dropdown()
sleep(2)   

obj.click_on_method1()
sleep(3)

$(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);
  document.querySelector('#btn_export').style.display = 'block';
});

#btn_export{display:none;}

在页面其他内容之前加载的HTML按钮

4 个答案: