Question

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

我的Html表的数据在一列中包含Total，而我的数据在同一行中，我试图实现的是将数字转换成百分比

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

代码段

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将no转换为百分比，但是在此表中无法实现我所需要的

我已经编辑了我的代码段，其中对于第一行我得到了正确的结果，但是对于第二行第一列它给出了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>

Answer 2

您可以做的是首先按日期对数据进行分组，然后使用该转换数据创建表。它看起来像这样：

const transformData = {}
//this will group your data by dates
data.forEach(data => {
  if(!transformData[data.billdate]) {
    transformData[data.billdate] = [];
  }
  transformData[data.billdate].push(data);
});

for(let date in transformData) {
  // this will calcualte total amount for that date
  const total = transformData[date].reduce((total, val) => {
    return total + val.amount;
  }, 0);
  transformData[date].forEach(data => {
    // here you can calculate percentage and populate your table
  })
}

如何以百分比显示HTML表数据

2 个答案: