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

标签 javascript html-table

我正在使用 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>

我想要我的 table 像

this is what i am trying to achieve

  • 我想动态放置 col-span 但发现它很复杂。
  • 这里有人请帮帮我

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

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

最佳答案 

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>

关于javascript - 我如何在 HTML 表格中提供动态 col-span，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53911694/

上一篇：javascript - 有没有办法从 webpack 获取依赖树？

下一篇：javascript - 避免仅在按 Enter 键时提交表单

相关文章：

html - 在表格单元格中使 div 高度为 100%

html - 对分隔的连续表格应用相同的表格列宽

javascript - 从 $http 返回的 AngularJS 对象 - 如何获取键/值对

javascript - Vuex 状态属性设置为响应 GET 请求。函数给出错误，因为所述属性显然为 NULL

javascript - 如何分配函数作为参数的变量

php - 每行表上的 MPdf 按钮边框

HTML 表格 : how to make all rows equal height?

javascript - 如何使用自动增量键更新 IndexedDB 项？

用于分辨率检测的 JavaScript，但似乎返回错误

html - 如何将 table 放在 table 里面？

©2024 IT工具网  联系我们