Question

我正在创建带有JSON数据的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("tbl");
    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 = "<b>billcount/netamount<b>";
      th.classList.add("text-center");
      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);
});

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

我希望我的桌子像

我想动态输入col-span，但是发现它非常复杂。
这里有人可以帮助我

我想在标题billcount netamount Total1's003'下为s001和s002创建单独的列

注意：-这是动态表，它将根据用户要求更改其数据，因此Outlets也可以从3到10不等

Answer 1

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("tbl");
  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 grandTotalBc = 0;
  let outletWiseTotal = {};
  let outletWiseTotalBc = {};
  th = document.createElement("th");
  th.innerHTML = "Total1";
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;

    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
	outletWiseTotalBc[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
		outletWiseTotalBc[element] += parseInt(el.billcount);
      }
    });
    grandTotal += outletWiseTotal[element];
	grandTotalBc += outletWiseTotalBc[element];
  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  sheaderRow = document.createElement("tr");
  sth = document.createElement("th");
  sth.innerHTML = "SubMenu";
  sheaderRow.appendChild(sth);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML =outletWiseTotalBc[element].toLocaleString('en-in')+'/'+ outletWiseTotal[element].toLocaleString('en-in');
    th.classList.add("text-right");

    headerRow.appendChild(th);
	
  sth = document.createElement("td");
  sth.innerHTML = "billcount/netamount";
  sheaderRow.appendChild(sth);
  });
  th = document.createElement("th");
  th.innerHTML = grandTotalBc.toLocaleString('en-in')+'/'+grandTotal.toLocaleString('en-in');
  th.classList.add("text-right");
  headerRow.insertBefore(th, headerRow.children[1]);
   sth = document.createElement("td");
  sth.innerHTML = "billcount/netamount";
  sheaderRow.appendChild(sth);
  thead.appendChild(sheaderRow);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
	  //console.log(element);
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element.split('-').join('/');
    row.appendChild(td);
    let total = 0;
	let totalBc = 0;
    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
		  totalBc += parseInt(d.billcount);
          el = d.amount;
		  billcount=d.billcount
        }
      });
      td = document.createElement("td");
      td.innerHTML = billcount+'/'+el.toLocaleString('en-in');
	  //console.log(billcount)
	 // console.log(el.toLocaleString('en-in'));
	  //console.log(total.toLocaleString('en-in'));
      td.classList.add("text-right");
      row.appendChild(td);
    });
    /*console.log("row is : " , row.children )*/
    td = document.createElement("td");
    td.innerHTML =totalBc.toLocaleString('en-in')+'/'+ total.toLocaleString('en-in');
	//console.log(total.toLocaleString('en-in'))
    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);

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

Answer 2

在下面的示例中，我没有关注数据格式，但我希望逻辑会有所帮助。

$(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.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="tbl1"></div>

如何在我的HTML表格中提供动态col-span

2 个答案: