javascript - 如何以百分比形式显示 HTML 表格数据

Question

我有一个 HTML 表，其中包含一些数字形式的数据，我想将它们转换为百分比。

我的 Html 表的数据在一列中包含总计，其数据在同一行中，我试图实现的是将 nos 转换为百分比

这就是我的表现在正在填充的数据

片段

var data=[
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  }
 
]


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 outletWiseTotal = {};
				    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;
				        data.forEach(el => {
				            if (el.outlet == element) {
				                outletWiseTotal[element] += parseInt(el.amount);
				            }
				        });
				        grandTotal += outletWiseTotal[element];
				    });
				    thead.appendChild(headerRow);
				    headerRow = document.createElement("tr");
				    th = document.createElement("th");
				    th.innerHTML = "Total";
				    headerRow.appendChild(th);

				    outlets.forEach(element => {
				        th = document.createElement("th");
                     //   console.log(outletWiseTotal[element]);
                       var test= ((outletWiseTotal[element]/grandTotal)*100);
                       var fix=test.toFixed(2)+"%";
                      console.log(fix)    // this one is giving me right result for row "Total"
				        th.innerHTML = fix;
				        th.classList.add("text-right");
                        //ol wise total  
				        
				        headerRow.appendChild(th);
				    });
				    th = document.createElement("th");
				    th.innerHTML = "100%" //grandTotal
				    th.classList.add("text-right");	
                        // grand total
				    headerRow.insertBefore(th , 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;
				        outlets.forEach(outlet => {
				            let el = 0;
				            data.forEach(d => {
				                if (d.billdate == element && d.outlet == outlet) {
				                    total += parseInt(d.amount);
				                    el = d.amount;
                                  
				                }
                              
				            });
                           td.classList.add("text-right");                       
                           var test1= ((el/total)*100);
                           console.log(test1)     //this one is giving some wrong result for first column it is giving 100% which is wrong
			               td = document.createElement("td");
                           td.innerHTML = el.toLocaleString('en-in');
                           row.appendChild(td);
				        });
						
				        td = document.createElement("td");
				        td.innerHTML = "100%"  //total date wise
				        td.classList.add("text-right");
 				         console.log(total) // total date wise
                          
						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");
				}
let formatedData = formatData(data);
         renderTable(formatedData);

<script src="https://code.jquery.com/jquery.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="tbl"></div>

我想要实现的目标是这样的

我知道如何使用 JavaScript 将否转换为百分比，但在此表中无法实现我所需要的

• 我已经编辑了我的代码片段，其中第一行我得到了正确的结果，但第二行第一列给出了 100

• 请检查我的代码片段

Answer 1

试试这个..

我在循环内创建了一个新变量let tempTotal = 0;并遵循此条件if (d.billdate == element){ tempTotal += parseInt(d.amount) ; } 现在使用 temTotal 来计算百分比

var data = [{
    amount: 518212,
    billdate: '2018-08-04',
    outlet: 'JAYANAGAR',
  },
  {
    amount: 104801,
    billdate: '2018-08-04',
    outlet: 'MALLESHWARAM',
  },
  {
    amount: 138151,
    billdate: '2018-08-04',
    outlet: 'KOLAR',
  },
]


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 outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;

    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    //   console.log(outletWiseTotal[element]);
    const test = (outletWiseTotal[element] / grandTotal) * 100
    const fix = test.toFixed(2) + "%"
    console.log(fix)
    th.innerHTML = fix;
    th.classList.add("text-right");

    headerRow.appendChild(th);
  });
  th = document.createElement("th");
  th.innerHTML = "100%";
  th.classList.add("text-right");

  /*  console.log(grandTotal);*/
  // headerRow.appendChild(th);
  headerRow.insertBefore(th, 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;
    outlets.forEach(outlet => {
      let el = 0;
      let tempTotal = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
        if (d.billdate == element) {
          tempTotal += parseInt(d.amount);
        }
      });
      var test1 = ((el / tempTotal) * 100);
      var fix = test1.toFixed(2) + "%";
      console.log(test1.toFixed(2))
      td = document.createElement("td");
      td.innerHTML = fix;
      td.classList.add("text-right");
      row.appendChild(td);
    });
    /*console.log("row is : " , row.children )*/
    td = document.createElement("td");
    td.innerHTML = "100%";
    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");
}
let formatedData = formatData(data);
renderTable(formatedData);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="tbl"></div>