how to dynamically/internally align some specific HTML data to right using javaScript
0
i am populating a HTML table with JSON data, i have json as it is as i want my table i am just writing java script code to dynamically populate the table, so here i am facing issues to make some changes in my html table internally
some points which i have to change in HTML table are
- I want to align all the data which are in no form to right except headers TOTAL 1 ,outlet because they are string so its ok for them to me left align
i am using tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right"); in my code but its aligning all data to right
here is my code
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>for clarification refer the image
and i want all the numbers which are amount to be in a comma separator like 123456 should be 1,23,456
please help me in alingment guys i am stuck here not able to find any solution please
javascript html
add a comment |
0
i am populating a HTML table with JSON data, i have json as it is as i want my table i am just writing java script code to dynamically populate the table, so here i am facing issues to make some changes in my html table internally
some points which i have to change in HTML table are
- I want to align all the data which are in no form to right except headers TOTAL 1 ,outlet because they are string so its ok for them to me left align
i am using tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right"); in my code but its aligning all data to right
here is my code
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>for clarification refer the image
and i want all the numbers which are amount to be in a comma separator like 123456 should be 1,23,456
please help me in alingment guys i am stuck here not able to find any solution please
javascript html
add a comment |
0
0
0
i am populating a HTML table with JSON data, i have json as it is as i want my table i am just writing java script code to dynamically populate the table, so here i am facing issues to make some changes in my html table internally
some points which i have to change in HTML table are
- I want to align all the data which are in no form to right except headers TOTAL 1 ,outlet because they are string so its ok for them to me left align
i am using tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right"); in my code but its aligning all data to right
here is my code
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>for clarification refer the image
and i want all the numbers which are amount to be in a comma separator like 123456 should be 1,23,456
please help me in alingment guys i am stuck here not able to find any solution please
javascript html
i am populating a HTML table with JSON data, i have json as it is as i want my table i am just writing java script code to dynamically populate the table, so here i am facing issues to make some changes in my html table internally
some points which i have to change in HTML table are
- I want to align all the data which are in no form to right except headers TOTAL 1 ,outlet because they are string so its ok for them to me left align
i am using tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right"); in my code but its aligning all data to right
here is my code
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>for clarification refer the image
and i want all the numbers which are amount to be in a comma separator like 123456 should be 1,23,456
please help me in alingment guys i am stuck here not able to find any solution please
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>javascript html
javascript html
asked Nov 16 '18 at 9:59
user10561216
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Add a condition for your class adding.
//some code ...
for (var i = 0; i < tableValue.length; i++)
{
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
{
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <---------------------------- This one
tabCell.classList.add("text-right");
}
//the remain of your code
}
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>answered Nov 16 '18 at 10:06
CidCid
5,25121129
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and findMyNumberVariable.toLocaleString("en-IN");?
– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335419%2fhow-to-dynamically-internally-align-some-specific-html-data-to-right-using-javas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Add a condition for your class adding.
//some code ...
for (var i = 0; i < tableValue.length; i++)
{
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
{
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <---------------------------- This one
tabCell.classList.add("text-right");
}
//the remain of your code
}
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>answered Nov 16 '18 at 10:06
CidCid
5,25121129
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and findMyNumberVariable.toLocaleString("en-IN");?
– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
add a comment |
0
Add a condition for your class adding.
//some code ...
for (var i = 0; i < tableValue.length; i++)
{
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
{
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <---------------------------- This one
tabCell.classList.add("text-right");
}
//the remain of your code
}
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>answered Nov 16 '18 at 10:06
CidCid
5,25121129
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and findMyNumberVariable.toLocaleString("en-IN");?
– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
add a comment |
0
0
0
Add a condition for your class adding.
//some code ...
for (var i = 0; i < tableValue.length; i++)
{
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
{
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <---------------------------- This one
tabCell.classList.add("text-right");
}
//the remain of your code
}
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>answered Nov 16 '18 at 10:06
CidCid
5,25121129
Add a condition for your class adding.
//some code ...
for (var i = 0; i < tableValue.length; i++)
{
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
{
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <---------------------------- This one
tabCell.classList.add("text-right");
}
//the remain of your code
}
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
if (j > 1) // <----------------------------There
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<table id="newTable"></table>
</body>
</html>answered Nov 16 '18 at 10:06
CidCid
5,25121129
answered Nov 16 '18 at 10:06
CidCid
5,25121129
answered Nov 16 '18 at 10:06
CidCid
5,25121129
answered Nov 16 '18 at 10:06
CidCid
5,25121129
5,25121129
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and findMyNumberVariable.toLocaleString("en-IN");?
– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
add a comment |
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and findMyNumberVariable.toLocaleString("en-IN");?
– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
thanx it worked :).. can you please help me out to formatting the numbers with comma separator into Indian currency like 123456 =1,23,456..please
– user10561216
Nov 16 '18 at 10:11
What about giving google a try for 30 seconds and find
MyNumberVariable.toLocaleString("en-IN"); ?– Cid
Nov 16 '18 at 10:16
What about giving google a try for 30 seconds and find
MyNumberVariable.toLocaleString("en-IN"); ?– Cid
Nov 16 '18 at 10:16
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
yup i knew this one but problem is what should i put in place of MyNumberVariable because that are in json how can i use them
– user10561216
Nov 16 '18 at 10:22
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
a small advice would be very helpful please what should i use in place of MyNumberVariable
– user10561216
Nov 16 '18 at 10:33
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
Where are the numbers you want to format?
– Cid
Nov 19 '18 at 10:02
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335419%2fhow-to-dynamically-internally-align-some-specific-html-data-to-right-using-javas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
