Question

我在ui（HTML页面）中有一个表单，其中有一些输入字段和一个搜索按钮（提交），在单击搜索时我正在隐藏表单并在div标签中显示一些内容（内容为HTML表格）。该HTML表格具有导出按钮，可以将表格内容导出到excel工作表中。但是在单击表单的搜索按钮时，首先会加载导出按钮，然后表格就会消失

像这样

这是我的HTML表单，此表单之后是具有表以及导出按钮的div容器

     <form id="formId" method="get">
        <div class="container">
            <h4>Start Date:</h4>
            <input  type="text" id="startdate" name="fromdate" width="276"
                placeholder="dd/mm/yyyy" required onchange="checkDate()" />
            <h4>End Date:</h4>
            <input  type="text" id="enddate" name="todate" width="276"
                placeholder="dd/mm/yyyy" required onchange="checkDate()"/>


            <h4>Outlets:</h4>
            <select id="all" name="outlet">
                 <option>ALL</option> 
                <c:forEach var="item" items="${obj.outlet}">
                    <option>${item}</option>
                </c:forEach>
            </select> 
         <div><br>
                </div>

            <div>
                <br>
 <button id="button" class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    <div id="tableContainer" class="container-fluid">
    <div id="tbl" ></div>

<button id="export">Export</button>


</div>

这是我通过ajax调用的javascript

 $(document).ready(function() {
    $("#formId").submit(function(event) {
        event.preventDefault();

        $.ajax({
            url : "URL",
            method : "GET",
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data : {
                   fromdate : $("#startdate").val(),
                   todate : $("#enddate").val(),
                   outlet : $("#all").val()

                 },

            success : function(data) {


//          console.log("test",tableValue);
            $("#formId").hide();
            var dataObj = formatData(data);
            addTable(dataObj);



        }

    });

这是我最初隐藏表格的代码

 $(document).ready(function() {
             //at beginning

             $('#tableContainer').hide();

             $('#button').click(function (e) {

               $('#tableContainer').show();
             });

             $("#export").click(function() {
                    $("#tbl").table2excel({
                        filename : "filenameSales.xls"
                    });
                });

             });

我只希望导出按钮应该在表格之后加载，这里我隐藏表格，然后将所有数据显示到新的div标签中。我如何才能实现任何人有任何想法请指导我。

这是json的完整代码。通过此代码，我操纵了j

    data=[
      {
        "amount": 11750,
        "billdate": "2018-05-05",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SARJAPURA ROAD"
      },
      {
        "amount": 11030,
        "billdate": "2018-05-05",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SINGASANDRA"
      },
      {
        "amount": 11619,
        "billdate": "2018-05-05",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SPICE GARDEN"
      },
      {
        "amount": 45229,
        "billdate": "2018-05-05",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Whitefield"
      },
      {
        "amount": 38239,
        "billdate": "2018-05-05",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS YELAHANKA"
      },
      {
        "amount": 7230,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ARAKERE"
      },
      {
        "amount": 14836,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS AYYAPPA NGR"
      },
      {
        "amount": 13984,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Bellandur"
      },
      {
        "amount": 1053,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS CHANDAPURA"
      },
      {
        "amount": 16239,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Doddanekkundi"
      },
      {
        "amount": 9575,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SIDDAPURA"
      },
      {
        "amount": 17965,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ECITY"
      },
      {
        "amount": 2644,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS VYDEHI"
      },
      {
        "amount": 4250,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Hennur Main Road"
      },
      {
        "amount": 17303,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS KADUBEESANAHALLI"
      },
      {
        "amount": 15680,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS COFFEE BOARD"
      },
      {
        "amount": 8035,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kaggadasapura"
      },
      {
        "amount": 4415,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Koramangala"
      },
      {
        "amount": 8785,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Marathahalli 1"
      },
      {
        "amount": 10425,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef bakers Marathahalli 2"
      },
      {
        "amount": 12625,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Mahadevapura"
      },
      {
        "amount": 12340,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS BEL LAYOUT"
      },
      {
        "amount": 12040,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS MG ROAD"
      },
      {
        "amount": 13859,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS NAGAWARA"
      },
      {
        "amount": 9125,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
      },
      {
        "amount": 24780,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS RR NAGAR"
      },
      {
        "amount": 27865,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kadugodi"
      },
      {
        "amount": 11285,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SARJAPURA ROAD"
      },
      {
        "amount": 3305,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SINGASANDRA"
      },
      {
        "amount": 12625,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SPICE GARDEN"
      },
      {
        "amount": 33766,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Whitefield"
      },
      {
        "amount": 34300,
        "billdate": "2018-05-06",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS YELAHANKA"
      },
      {
        "amount": 6751,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ARAKERE"
      },
      {
        "amount": 12626,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS AYYAPPA NGR"
      },
      {
        "amount": 33020,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Bellandur"
      },
      {
        "amount": 450,
        "billdate": "2018-05-07",
        "counter": "Take Away",
        "outlet": "Chef Bakers Bellandur"
      },
      {
        "amount": 2215,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS CHANDAPURA"
      },
      {
        "amount": 6518,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Doddanekkundi"
      },
      {
        "amount": 11305,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SIDDAPURA"
      },
      {
        "amount": 11990,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ECITY"
      },
      {
        "amount": 11350,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS VYDEHI"
      },
      {
        "amount": 5440,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Hennur Main Road"
      },
      {
        "amount": 20707,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS KADUBEESANAHALLI"
      },
      {
        "amount": 14155,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS COFFEE BOARD"
      },
      {
        "amount": 5285,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kaggadasapura"
      },
      {
        "amount": 5404,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Koramangala"
      },
      {
        "amount": 5200,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Marathahalli 1"
      },
      {
        "amount": 13000,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef bakers Marathahalli 2"
      },
      {
        "amount": 20049,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Mahadevapura"
      },
      {
        "amount": 10592,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS BEL LAYOUT"
      },
      {
        "amount": 9934,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS MG ROAD"
      },
      {
        "amount": 9803,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS NAGAWARA"
      },
      {
        "amount": 13877,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
      },
      {
        "amount": 42368,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS PRITECH"
      },
      {
        "amount": 13173,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS RR NAGAR"
      },
      {
        "amount": 26263,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kadugodi"
      },
      {
        "amount": 7250,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SARJAPURA ROAD"
      },
      {
        "amount": 3100,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SINGASANDRA"
      },
      {
        "amount": 9870,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SPICE GARDEN"
      },
      {
        "amount": 23093,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Whitefield"
      },
      {
        "amount": 20805,
        "billdate": "2018-05-07",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS YELAHANKA"
      },
      {
        "amount": 4140,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ARAKERE"
      },
      {
        "amount": 11137,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS AYYAPPA NGR"
      },
      {
        "amount": 33034,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Bellandur"
      },
      {
        "amount": 700,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS CHANDAPURA"
      },
      {
        "amount": 12351,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Doddanekkundi"
      },
      {
        "amount": 12190,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SIDDAPURA"
      },
      {
        "amount": 13269,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ECITY"
      },
      {
        "amount": 10023,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS VYDEHI"
      },
      {
        "amount": 5180,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Hennur Main Road"
      },
      {
        "amount": 22279,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS KADUBEESANAHALLI"
      },
      {
        "amount": 17543,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS COFFEE BOARD"
      },
      {
        "amount": 11850,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kaggadasapura"
      },
      {
        "amount": 7634,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Koramangala"
      },
      {
        "amount": 8175,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Marathahalli 1"
      },
      {
        "amount": 13159,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef bakers Marathahalli 2"
      },
      {
        "amount": 21519,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Mahadevapura"
      },
      {
        "amount": 7610,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS BEL LAYOUT"
      },
      {
        "amount": 7634,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS MG ROAD"
      },
      {
        "amount": 23463,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS MANYATA TECH PARK"
      },
      {
        "amount": 14705,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS NAGAWARA"
      },
      {
        "amount": 9020,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
      },
      {
        "amount": 40225,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS PRITECH"
      },
      {
        "amount": 11430,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS RR NAGAR"
      },
      {
        "amount": 21596,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kadugodi"
      },
      {
        "amount": 7000,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SARJAPURA ROAD"
      },
      {
        "amount": 3050,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SINGASANDRA"
      },
      {
        "amount": 6705,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SPICE GARDEN"
      },
      {
        "amount": 29221,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Whitefield"
      },
      {
        "amount": 24020,
        "billdate": "2018-05-08",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS YELAHANKA"
      },
      {
        "amount": 5410,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ARAKERE"
      },
      {
        "amount": 13660,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Bellandur"
      },
      {
        "amount": 1073,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS CHANDAPURA"
      },
      {
        "amount": 8995,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Doddanekkundi"
      },
      {
        "amount": 13405,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS SIDDAPURA"
      },
      {
        "amount": 14910,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS ECITY"
      },
      {
        "amount": 9730,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS VYDEHI"
      },
      {
        "amount": 4001,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Hennur Main Road"
      },
      {
        "amount": 16252,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "CHEF BAKERS KADUBEESANAHALLI"
      },
      {
        "amount": 6490,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Kaggadasapura"
      },
      {
        "amount": 6913,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Koramangala"
      },
      {
        "amount": 13493,
        "billdate": "2018-05-09",
        "counter": "Fast Food",
        "outlet": "Chef Bakers Marathahalli 1"
      },
        ]

function formatData(data) {
    let toReturn = [];
    let dateWiseObj = {};
    let maxUniqueForOutlets = {};
    data.forEach(function (d) {
        if (!maxUniqueForOutlets[d["outlet"]]) {
            maxUniqueForOutlets[d["outlet"]] = [];
        }
        if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
            maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
        }

        if (!dateWiseObj[d["billdate"]]) {
            dateWiseObj[d["billdate"]] = {};
            dateWiseObj[d["billdate"]][d["outlet"]] = {};
            dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
        } else {
            if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
                dateWiseObj[d["billdate"]][d["outlet"]] = {};
                dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
            } else {
                if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
                    dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
                }
            }
        }

    });



    return {
        dateWiseObj: dateWiseObj,
        maxUniqueForOutlets: maxUniqueForOutlets
    };
};


function addTable(dataObj) {
    let dateWiseObj = dataObj.dateWiseObj;
    let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
    let table = document.createElement("table");
    let thead = document.createElement("thead");
    let headerRow = document.createElement("tr");
    let th = document.createElement("th");
    th.innerHTML = "Outlet";
    headerRow.appendChild(th);
    th = document.createElement("th");
    th.innerHTML = "Total";
    headerRow.appendChild(th);
    Object.keys(maxUniqueForOutlets).forEach(function (d) {
        th = document.createElement("th");
        th.innerHTML = d;
        th.colSpan = maxUniqueForOutlets[d].length + 1;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    headerRow = document.createElement("tr");
    th = document.createElement("th");
    th.innerHTML = "Bill_____Date";
    headerRow.appendChild(th);
    th = document.createElement("th");
    th.innerHTML = "Counter";
    headerRow.appendChild(th);
    Object.keys(maxUniqueForOutlets).forEach(function (k) {
        th = document.createElement("th");
        th.innerHTML = "Total";
        headerRow.appendChild(th);
        maxUniqueForOutlets[k].forEach(function (d) {
            th = document.createElement("th");
            th.innerHTML = d;
            headerRow.appendChild(th);
        });
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);


    let tbody = document.createElement("tbody");
    headerRow = document.createElement("tr");
    let completeTotal = 0;
    let outletandCounterWiseCompleteTotal = {};
    Object.keys(dateWiseObj).forEach(function (k) {
        let row = document.createElement("tr");

        let td = document.createElement("td");
        td.innerHTML = k;
        row.appendChild(td);


        grandTotal = 0;
        outletWiseTotal = {};
        Object.keys(maxUniqueForOutlets).map(function (d) {
            if (!outletandCounterWiseCompleteTotal[d])
                outletandCounterWiseCompleteTotal[d] = {};
            outletWiseTotal[d] = 0;
            if (dateWiseObj[k][d]) {
                Object.keys(dateWiseObj[k][d]).forEach(function (i) {
                    if (outletandCounterWiseCompleteTotal[d][i]) {
                        outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
                    } else {
                        outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
                    }
                    outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
                });
            }
            if (outletandCounterWiseCompleteTotal[d]["total"])
                outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
            else
                outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
            grandTotal += outletWiseTotal[d];
        });
        td = document.createElement("td");
        td.innerHTML = grandTotal;
        row.appendChild(td);

        Object.keys(maxUniqueForOutlets).map(function (d) {
            td = document.createElement("td");
            td.innerHTML = outletWiseTotal[d];
            row.appendChild(td);
            if (dateWiseObj[k][d]) {
                maxUniqueForOutlets[d].forEach(function (i) {
                    td = document.createElement("td");
                    td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
                    row.appendChild(td);
                });
            } else {
                maxUniqueForOutlets[d].forEach(function (i) {
                    td = document.createElement("td");
                    td.innerHTML = "0";
                    row.appendChild(td);
                });
            }
        });
        tbody.appendChild(row);
        completeTotal += grandTotal;
        //console.log(outletWiseTotal);
    });

    th = document.createElement("th");
    th.innerHTML = "Total";
    headerRow.appendChild(th);
    th = document.createElement("th");
    th.innerHTML = completeTotal;
    headerRow.appendChild(th);

    Object.keys(maxUniqueForOutlets).forEach(function (d) {
        if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
            th = document.createElement("th");
            th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"];
            headerRow.appendChild(th);
        } else {
            th = document.createElement("th");
            th.innerHTML = 0;
            headerRow.appendChild(th);
        }
        maxUniqueForOutlets[d].forEach(function (i) {
            if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
                th = document.createElement("th");
                th.innerHTML = outletandCounterWiseCompleteTotal[d][i];
                headerRow.appendChild(th);
            } else {
                th = document.createElement("th");
                th.innerHTML = 0;
                headerRow.appendChild(th);
            }
        });
    });

    thead.appendChild(headerRow);
    table.appendChild(tbody);
    let divContainer = document.getElementById("tbl");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
}
var dataObj = formatData(data);
addTable(dataObj);

Answer 1

tableContainer应该最初是隐藏的，并且在表加载完成后，将其设置为可见。无需尝试在按钮级别上进行操作。确切的代码取决于您用来创建表的库

@edit：哦，因为您是用纯Javascript编写的，并以这种方式操作DOM，所以只需将其添加到addTable

的末尾

$("#tableContainer").show();

并查找您的代码先前取消隐藏tableContainer的位置。由于您将其隐藏在document ready中，因此必定有某个地方隐藏在您发布的代码之外的代码中

@edit 2：也删除

  $('#button').click(function (e) {

               $('#tableContainer').show();
             });

Answer 2

我个人将在数据加载后向高级DOM元素（例如BODY标记）添加CSS类，以帮助触发所需的样式更改。像身体这样高的水平做，将来有扩展的余地。在您的AJAX请求的成功功能中执行以下操作：

 $(document).ready(function() {
    $("#formId").submit(function(event) {
        event.preventDefault();

        $.ajax({
            url : "URL",
            method : "GET",
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data : {
                   fromdate : $("#startdate").val(),
                   todate : $("#enddate").val(),
                   outlet : $("#all").val()

                 },

            success : function(data) {


//          console.log("test",tableValue);

            $("body").addClass('data-loaded');
            var dataObj = formatData(data);
            addTable(dataObj);



        }

    });

请注意，我还删除了$("#formId").hide();，因为您现在可以使用我的新类通过CSS隐藏按钮了，.data-loaded #formId {display none;}。然后，您可以为表做相反的CSS，以使其在正文具有该类时显示。

以这种方式使用表单时，隐藏诸如表单之类的用户控件也不是很好的用户体验。最好保持表格可见，在下面立即显示结果，并具有“再次搜索”按钮，该按钮可在执行新搜索之前删除所有以前的搜索结果。显然，这是更多的工作，但是您的用户肯定会喜欢这些额外的工作。

两个按钮相互重叠

2 个答案: