两个按钮相互重叠

【问题标题】：two buttons are overlapping each other两个按钮相互重叠
【发布时间】：2018-11-09 09:36:14
【问题描述】：

我的 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);

【问题讨论】：

    标签： javascript jquery html


    【解决方案1】：

    我个人会在加载数据时将 CSS 类添加到高级 DOM 元素（例如 BODY 标记）以帮助触发您想要的样式更改。像身体一样在如此高的水平上做它，为未来的扩展留下了空间。因此，请在您的 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 以使其在正文具有该类时出现。

    以这种方式隐藏用户控件（如表单）也不是很好的用户体验。最好保持您的表单可见，在下面立即显示结果并有一个“再次搜索”按钮，该按钮可以在执行新搜索之前删除任何以前的搜索结果。这显然需要做更多的工作，但您的用户肯定会感谢您付出的额外努力。

    【讨论】：

    • 我明白你的意思，我应该在表单下方显示 HTML 表格，不需要隐藏表单吧？
    • 是的，我已经建立了很多搜索结果页面，而且隐藏控件的形式总是很糟糕。如果用户意识到他们使用了错误的开始/结束日期并想要修改他们的结果怎么办？隐藏表格将使这成为不可能。因此，请确保您有一些 JQuery/Javascript 可以在搜索后将您的表单重置为未触及状态，然后您可以添加一个 Search Again 按钮，该按钮仅删除 .data-loaded 类。
    • 那么如何解决我的按钮重叠问题？
    • 因为默认情况下你会用 CSS 隐藏你的导出按钮，然后在 body 有 .data-loaded 类时显示它。因此，导出按钮只会在表格充满数据并且在屏幕上可见时才会显示。
    • 您找到解决方案了吗？
    【解决方案2】：

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

    @编辑： 哦，既然你是用纯 Javascript 做的，并以这种方式操作 DOM，只需在 addTable 末尾添加这个即可。

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

    然后查找您的代码之前取消隐藏tableContainer 的位置。由于您将其隐藏在document ready 中，因此它必须在您发布的代码中未隐藏的地方取消隐藏

    @edit 2：同时删除

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

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

    【讨论】：

    • 您应该发布工作代码作为示例，以使您的答案更有价值。
    • 看看对帖子进行了编辑..我正在这样做
    • 我需要制作表格的代码。 lib的名称就足够了。基本上是 addTable(dataObj); 里面的代码
    • @LoredraL 我不知道你在说什么我已经在做。
    • 在按钮点击事件中不显示容器。在 addTable 的末尾显示
    猜你喜欢
    • 1970-01-01
    • 2019-03-25
    • 1970-01-01
    • 2021-01-03
    • 2011-08-09
    • 2019-08-07
    • 1970-01-01
    • 2014-01-25
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode