javascript - 如何使用 JavaScript 将动态 `colspan` 放入 HTML 表格中

Question

我有一个 HTML 表格，它需要 colspan 但我不知道如何实现它

目前我正在使用 / 将表中的值分隔为一列，但这在 UI 上看起来不太好，很难理解哪个是什么

我的代码片段

$(document).ready(function() {
  const data = [{
    "outlet": "S0001",
    "billdate": "2018-08-22",
    "amount": 418418,
    "billcount": "3471"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-23",
    "amount": 319472,
    "billcount": "3050"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-24",
    "amount": 300111,
    "billcount": "2824"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-25",
    "amount": 452893,
    "billcount": "3622"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-22",
    "amount": 87390,
    "billcount": "1054"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-23",
    "amount": 67142,
    "billcount": "950"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-24",
    "amount": 50997,
    "billcount": "741"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-25",
    "amount": 94641,
    "billcount": "1072"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-22",
    "amount": 77922,
    "billcount": "308"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-23",
    "amount": 56506,
    "billcount": "236"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-24",
    "amount": 57926,
    "billcount": "232"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-25",
    "amount": 126538,
    "billcount": "476"
  }]
  let formatData = function(data) {
    let billdates = [];
    let outlets = [];
    data.forEach(element => {
      if (billdates.indexOf(element.billdate) == -1) {
        billdates.push(element.billdate);
      }
      if (outlets.indexOf(element.outlet) == -1) {
        outlets.push(element.outlet);
      }
    });
    return {
      data: data,
      billdates: billdates,
      outlets: outlets,

    };
  };

  let renderTable = function(data) {
    billdates = data.billdates;
    outlets = data.outlets;
    data = data.data;
    let tbl = document.getElementById("tbl1");
    let table = document.createElement("table");
    let thead = document.createElement("thead");
    let headerRow = document.createElement("tr");
    let th = document.createElement("th");
    th.innerHTML = "Bill_____Date";
    headerRow.appendChild(th);
    let grandTotal = 0;
    let grandbillcount = 0;
    let outletWiseTotal = {};
    let outletWiseBillCount = {};
    th = document.createElement("th");
    th.innerHTML = "Total1";
    headerRow.appendChild(th);
    outlets.forEach(element => {
      debugger;
      th = document.createElement("th");
      th.innerHTML = element;

      headerRow.appendChild(th);
      outletWiseTotal[element] = 0;
      outletWiseBillCount[element] = 0;
      data.forEach(el => {
        if (el.outlet == element) {
          outletWiseTotal[element] += parseInt(el.amount);
          outletWiseBillCount[element] += parseInt(el.billcount);
        }
      });
      grandTotal += outletWiseTotal[element];
      grandbillcount += outletWiseBillCount[element];
    });

    thead.appendChild(headerRow);
    headerRow = document.createElement("tr");
    th = document.createElement("td");
    th.innerHTML = "<b>SubMenu</b>";
    headerRow.appendChild(th);

    for (i = 0; i < outlets.length + 1; i++) {
      th = document.createElement("td");
      th.innerHTML = "billcount/netamount";
      headerRow.appendChild(th);
    }

    headerRow.insertBefore(th, headerRow.children[1]);
    thead.appendChild(headerRow);
    table.appendChild(thead);

    headerRow = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = "<b>Total</b>";
    headerRow.appendChild(td);

    outlets.forEach(element => {
      td = document.createElement("td");
      td.innerHTML = outletWiseBillCount[element] + "/" + outletWiseTotal[element];
      td.classList.add("text-right");

      headerRow.appendChild(td);
    });
    td = document.createElement("td");
    td.innerHTML = grandbillcount + "/" + grandTotal;
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);
    thead.appendChild(headerRow);
    table.appendChild(thead);

    let tbody = document.createElement("tbody");
    billdates.forEach(element => {
      let row = document.createElement("tr");
      td = document.createElement("td");
      td.innerHTML = element;
      row.appendChild(td);
      let total = 0;
      let totalBCount = 0;
      outlets.forEach(outlet => {
        let el = 0;
        let bc = 0;
        data.forEach(d => {
          if (d.billdate == element && d.outlet == outlet) {
            total += parseInt(d.amount);
            totalBCount += parseInt(d.billcount);
            el = d.amount;
            bc = d.billcount;
          }
        });
        td = document.createElement("td");
        td.innerHTML = bc + "/" + el;
        td.classList.add("text-right");
        row.appendChild(td);
      });
      /*console.log("row is : " , row.children )*/
      td = document.createElement("td");
      td.innerHTML = totalBCount + "/" + total;
      td.classList.add("text-right");
      // row.appendChild(td);
      row.insertBefore(td, row.children[1]);
      tbody.appendChild(row);
    });

    table.appendChild(tbody);
    tbl.innerHTML = "";
    tbl.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");
  }

  let formatedData = formatData(data);
  renderTable(formatedData);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbl1"></div>

这就是我到目前为止所做的，但现在我想放置 colspan 而不是想知道我该如何实现它

我要实现的目标

Answer 1

请试一试，这是你想要的

$(document).ready(function() {
  const data = [{
    "outlet": "S0001",
    "billdate": "2018-08-22",
    "amount": 418418,
    "billcount": "3471"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-23",
    "amount": 319472,
    "billcount": "3050"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-24",
    "amount": 300111,
    "billcount": "2824"
  }, {
    "outlet": "S0001",
    "billdate": "2018-08-25",
    "amount": 452893,
    "billcount": "3622"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-22",
    "amount": 87390,
    "billcount": "1054"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-23",
    "amount": 67142,
    "billcount": "950"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-24",
    "amount": 50997,
    "billcount": "741"
  }, {
    "outlet": "S0002",
    "billdate": "2018-08-25",
    "amount": 94641,
    "billcount": "1072"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-22",
    "amount": 77922,
    "billcount": "308"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-23",
    "amount": 56506,
    "billcount": "236"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-24",
    "amount": 57926,
    "billcount": "232"
  }, {
    "outlet": "S0009",
    "billdate": "2018-08-25",
    "amount": 126538,
    "billcount": "476"
  }]
  let formatData = function(data) {
    let billdates = [];
    let outlets = [];
    data.forEach(element => {
      if (billdates.indexOf(element.billdate) == -1) {
        billdates.push(element.billdate);
      }
      if (outlets.indexOf(element.outlet) == -1) {
        outlets.push(element.outlet);
      }
    });
    return {
      data: data,
      billdates: billdates,
      outlets: outlets,

    };
  };

  let renderTable = function(data) {
    billdates = data.billdates;
    outlets = data.outlets;
    data = data.data;
    let tbl = document.getElementById("table");
    let table = document.createElement("table");
    let thead = document.createElement("thead");
    let headerRow = document.createElement("tr");
    let th = document.createElement("th");
    th.innerHTML = "Bill_____Date";
    headerRow.appendChild(th);
    let grandTotal = 0;
    let grandbillcount = 0;
    let outletWiseTotal = {};
    let outletWiseBillCount = {};
    th = document.createElement("th");
    th.colSpan = 2;
    th.innerHTML = "Total1";
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outlets.forEach(element => {

      th = document.createElement("th");
      th.colSpan = 2;
      th.innerHTML = element;
      th.classList.add("text-center");
      headerRow.appendChild(th);

      outletWiseTotal[element] = 0;
      outletWiseBillCount[element] = 0;
      data.forEach(el => {
        if (el.outlet == element) {
          outletWiseTotal[element] += parseInt(el.amount);
          outletWiseBillCount[element] += parseInt(el.billcount);
        }
      });
      grandTotal += outletWiseTotal[element];
      grandbillcount += outletWiseBillCount[element];
    });

    thead.appendChild(headerRow);
    headerRow = document.createElement("tr");
    th = document.createElement("td");
    th.innerHTML = "<b>SubMenu</b>";
    headerRow.appendChild(th);

    for (i = 0; i < outlets.length + 1; i++) {
      th = document.createElement("td");
      th.innerHTML = "netamount";
      headerRow.appendChild(th);

      th = document.createElement("td");
      th.innerHTML = "billcount";
      headerRow.appendChild(th);
    }

    headerRow.insertBefore(th, headerRow.children[1]);
    thead.appendChild(headerRow);
    table.appendChild(thead);

    headerRow = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = "<b>Total</b>";
    headerRow.appendChild(td);

    outlets.forEach(element => {
      td = document.createElement("td");
      td.innerHTML = outletWiseBillCount[element];
      td.classList.add("text-right");
      headerRow.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = outletWiseTotal[element];
      td.classList.add("text-right");
      headerRow.appendChild(td);
    });
    td = document.createElement("td");
    td.innerHTML = grandTotal;
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);

    td = document.createElement("td");
    td.innerHTML = grandbillcount;
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);

    thead.appendChild(headerRow);
    table.appendChild(thead);

    let tbody = document.createElement("tbody");
    billdates.forEach(element => {
      let row = document.createElement("tr");
      td = document.createElement("td");
      td.innerHTML = element;
      row.appendChild(td);


      let total = 0;
      let totalBCount = 0;
      outlets.forEach(outlet => {
        let el = 0;
        let bc = 0;
        data.forEach(d => {
          if (d.billdate == element && d.outlet == outlet) {
            total += parseInt(d.amount);
            totalBCount += parseInt(d.billcount);
            el = d.amount;
            bc = d.billcount;
          }
        });

        td = document.createElement("td");
        td.innerHTML = bc;
        td.classList.add("text-right");
        row.appendChild(td);

        td = document.createElement("td");
        td.innerHTML = el;
        td.classList.add("text-right");
        row.appendChild(td);
      });
      /*console.log("row is : " , row.children )*/
      td = document.createElement("td");
      td.innerHTML = total;
      td.classList.add("text-right");
      row.insertBefore(td, row.children[1]);

      td = document.createElement("td");
      td.innerHTML = totalBCount;
      td.classList.add("text-right");
      row.insertBefore(td, row.children[1]);

      tbody.appendChild(row);
    });

    table.appendChild(tbody);
    tbl.innerHTML = "";
    tbl.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");
  }

  let formatedData = formatData(data);
  renderTable(formatedData);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table"></div>