Как выровнять данные html по правому или левому краю с помощью javascript

Я создал HTML-таблицу из данных JSON и отформатировал этот JSON в java-скрипте как необходимую мне HTML-таблицу.

Место, где я застрял, - это то, что я хочу правильно выровнять всю сумму, полученную из моих данных JSON. Все числа я хочу выровнять только по правому краю, но не могу этого сделать

вот мой код javascript с json

var data = [
            {
                "amount": 476426,
                "billdate": "2018-09-01",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 92141,
                "billdate": "2018-09-01",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 115313,
                "billdate": "2018-09-01",
                "outlet": "KOLAR"
              },
              {
                "amount": 511153,
                "billdate": "2018-09-02",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 115704,
                "billdate": "2018-09-02",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 83597,
                "billdate": "2018-09-02",
                "outlet": "KOLAR"
              },
              {
                "amount": 167421,
                "billdate": "2018-09-03",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 53775,
                "billdate": "2018-09-03",
                "outlet": "KOLAR"
              },
              {
                "amount": 269711,
                "billdate": "2018-09-04",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 58849,
                "billdate": "2018-09-04",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 82998,
                "billdate": "2018-09-04",
                "outlet": "KOLAR"
              },
              {
                "amount": 335833,
                "billdate": "2018-09-05",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 66177,
                "billdate": "2018-09-05",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 85396,
                "billdate": "2018-09-05",
                "outlet": "KOLAR"
              },
              {
                "amount": 259445,
                "billdate": "2018-09-06",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 61144,
                "billdate": "2018-09-06",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 61782,
                "billdate": "2018-09-06",
                "outlet": "KOLAR"
              },
              {
                "amount": 294481,
                "billdate": "2018-09-07",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 61872,
                "billdate": "2018-09-07",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 66403,
                "billdate": "2018-09-07",
                "outlet": "KOLAR"
              },
              {
                "amount": 451206,
                "billdate": "2018-09-08",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 111289,
                "billdate": "2018-09-08",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 96784,
                "billdate": "2018-09-08",
                "outlet": "KOLAR"
              },
              {
                "amount": 578767,
                "billdate": "2018-09-09",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 124466,
                "billdate": "2018-09-09",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 97088,
                "billdate": "2018-09-09",
                "outlet": "KOLAR"
              },
              {
                "amount": 181344,
                "billdate": "2018-09-10",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 27940,
                "billdate": "2018-09-10",
                "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 = {};
                         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];
                         });
                         th = document.createElement("th");
                         th.innerHTML = "Total";
                         headerRow.appendChild(th);
                         thead.appendChild(headerRow);
                         headerRow = document.createElement("tr");
                         th = document.createElement("th");
                         th.innerHTML = "Total";
                         headerRow.appendChild(th);

                         outlets.forEach(element => {
                             th = document.createElement("th");
                             th.innerHTML = outletWiseTotal[element];
                             headerRow.appendChild(th);
                         });
                         th = document.createElement("th");
                         th.innerHTML = grandTotal;
                         headerRow.appendChild(th);
                         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 = document.createElement("td");
                                 td.innerHTML = el;
                                 row.appendChild(td);
                             });
                             td = document.createElement("td");
                             td.innerHTML = total;
                             row.appendChild(td);
                             tbody.appendChild(row);
                         });

                         table.appendChild(tbody);

                         tbl.innerHTML = "";
                         tbl.appendChild(table);
                         table.classList.add("table");
                         table.classList.add("table-bordered");
                     };
                     let formatedData = formatData(data);
                     renderTable(formatedData);

Я не знаю, как я могу этого добиться, и, наконец, есть ВСЕГО, и я хочу сделать его так, чтобы он был жирным.

кроме даты, я хочу, чтобы все числа были выровнены по правому краювот моя рабочий пример

.table TD {text-align: right;} в таблице стилей должен помочь.
Teemu 26.10.2018 07:26
"я хочу правильно выровнять всю сумму" Что вы пробовали до сих пор и что вы подразумеваете под "количество"? Не могли бы вы обновить свой вопрос, включив в него свои попытки и конкретизируя, спасибо.
NewToJS 26.10.2018 07:28

@NewToJS Grandtotal, Outletwisetotal, почасовая сумма, это мои суммы

user10561216 26.10.2018 07:30

@dheerajkumar, а что вы пробовали до сих пор? Обновите свой вопрос и укажите свои попытки. Спасибо.

NewToJS 26.10.2018 07:38
2
4
184
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте использовать класс начальной загрузки текст-право или текстовый центр для th и тд

var data = [
	            {
	                "amount": 476426,
	                "billdate": "2018-09-01",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 92141,
	                "billdate": "2018-09-01",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 115313,
	                "billdate": "2018-09-01",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 511153,
	                "billdate": "2018-09-02",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 115704,
	                "billdate": "2018-09-02",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 83597,
	                "billdate": "2018-09-02",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 167421,
	                "billdate": "2018-09-03",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 53775,
	                "billdate": "2018-09-03",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 269711,
	                "billdate": "2018-09-04",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 58849,
	                "billdate": "2018-09-04",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 82998,
	                "billdate": "2018-09-04",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 335833,
	                "billdate": "2018-09-05",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 66177,
	                "billdate": "2018-09-05",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 85396,
	                "billdate": "2018-09-05",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 259445,
	                "billdate": "2018-09-06",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 61144,
	                "billdate": "2018-09-06",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 61782,
	                "billdate": "2018-09-06",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 294481,
	                "billdate": "2018-09-07",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 61872,
	                "billdate": "2018-09-07",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 66403,
	                "billdate": "2018-09-07",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 451206,
	                "billdate": "2018-09-08",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 111289,
	                "billdate": "2018-09-08",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 96784,
	                "billdate": "2018-09-08",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 578767,
	                "billdate": "2018-09-09",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 124466,
	                "billdate": "2018-09-09",
	                "outlet": "MALLESHWARAM"
	              },
	              {
	                "amount": 97088,
	                "billdate": "2018-09-09",
	                "outlet": "KOLAR"
	              },
	              {
	                "amount": 181344,
	                "billdate": "2018-09-10",
	                "outlet": "JAYANAGAR"
	              },
	              {
	                "amount": 27940,
	                "billdate": "2018-09-10",
	                "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.classList.add("text-center");
	                         th.innerHTML = "Bill_Date";
	                         headerRow.appendChild(th);
	                         let grandTotal = 0;
	                         let outletWiseTotal = {};
	                         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];
	                         });
	                         th = document.createElement("th");
                           
                            
	                         th.innerHTML = "Total";
	                         headerRow.appendChild(th);
	                         thead.appendChild(headerRow);
	                         headerRow = document.createElement("tr");
	                         th = document.createElement("th");
                           th.classList.add("text-center");
	                         th.innerHTML = "Total";
	                         headerRow.appendChild(th);

	                         outlets.forEach(element => {
	                             th = document.createElement("th");
                               th.classList.add("text-center");
	                             th.innerHTML = outletWiseTotal[element];
	                             headerRow.appendChild(th);
	                         });
	                         th = document.createElement("th");
                           th.classList.add("text-center");
	                         th.innerHTML = grandTotal;
	                         headerRow.appendChild(th);
	                         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 = document.createElement("td");
                                   td.classList.add("text-right");
	                                 td.innerHTML = el;
	                                 row.appendChild(td);
	                             });
	                             td = document.createElement("td");
                               td.classList.add("text-right");
	                             td.innerHTML = total;
	                             row.appendChild(td);
	                             tbody.appendChild(row);
	                         });

	                         table.appendChild(tbody);

	                         tbl.innerHTML = "";
	                         tbl.appendChild(table);
	                         table.classList.add("table");
	                         table.classList.add("table-bordered"); 
                           table.classList.add("text-center");
                           
	                     };
	                     let formatedData = formatData(data);
	                     renderTable(formatedData);
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div id="tbl"></div>

Другие вопросы по теме