gpt4 book ai didi

javascript - 如何在内部使用 JavaScript 为数字添加逗号分隔符?

转载 作者:行者123 更新时间:2023-11-28 17:16:37 25 4
gpt4 key购买 nike

我有一个 HTML 页面,其中显示来自 JSON 数据的 HTML 表。我想为所有印度格式的数字添加逗号分隔符。

我知道通过使用 .toLocaleString('en-IN') 我可以实现我想要的,但是我应该将它放在代码中的哪里?我很困惑。

这是我的代码:

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)
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)

我应该在代码中的哪里编写 .toLocaleString('en-IN') 来为我的所有号码添加逗号分隔符

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)

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>

最佳答案

这里不会对您已有的代码进行太多更改。

正如我提到的,主要问题是您的字符串不是数字,因此您调用 toLocaleString 不会产生任何效果。

您可以在添加之前使用 !isNaN 检查 tableValue 是否为数字,然后对该值调用 parseInt,然后 toLocaleString.

// 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);
var val = tableValue[i][col[j]];
if(val && !isNaN(val)){
val = parseInt(val).toLocaleString('en-in')
}
tabCell.innerHTML = (val);

if (j > 1)
tabCell.classList.add("text-right");

}

免责声明由于我确定这不是完整的数据集,因此您的里程数可能会因该答案而异。您可能需要也可能不需要添加更复杂的检查。另一个需要考虑的选择是在验证和清理阶段获得数据后立即执行所有这些操作。这样,您就可以解耦渲染/显示逻辑和数据检查逻辑,以防您想要修改的数据不仅仅是这个。您可以看到,如果您开始将所有这些内容都填充到上面的一个循环中,您的程序可能会变得复杂。

编辑

带有建议修改的片段:

tableValue = [{
"5": "4960",
"6": "38752",
"7": "137323",
"8": "183184",
"9": "180678",
"10": "181543",
"11": "127190",
"12": "131412",
"13": "256744",
"14": "387153",
"15": "234712",
"16": "182171",
"17": "190143",
"18": "209417",
"19": "196859",
"20": "194871",
"21": "130037",
"22": "17614",
"OUTLET": "",
"BILL___DATE": "TOTAL",
"TOTAL": "2984763"
},
{
"5": "2677",
"6": "5948",
"7": "10259",
"8": "17453",
"9": "21044",
"10": "21235",
"11": "19691",
"12": "22327",
"13": "37018",
"14": "51560",
"15": "68478",
"16": "33797",
"17": "32089",
"18": "29810",
"19": "32071",
"20": "30675",
"21": "34726",
"22": "5568",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "476426"
},
{
"5": "132",
"6": "6251",
"7": "19551",
"8": "31286",
"9": "36486",
"10": "34866",
"11": "17343",
"12": "20845",
"13": "38726",
"14": "88845",
"15": "39685",
"16": "24593",
"17": "28852",
"18": "31652",
"19": "35708",
"20": "38314",
"21": "17373",
"22": "645",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "511153"
},
{
"5": "0",
"6": "0",
"7": "2963",
"8": "11132",
"9": "8799",
"10": "8371",
"11": "8582",
"12": "11856",
"13": "23646",
"14": "11929",
"15": "11946",
"16": "12162",
"17": "13064",
"18": "12182",
"19": "16915",
"20": "12046",
"21": "1828",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "167421"
},
{
"5": "988",
"6": "5361",
"7": "13765",
"8": "10278",
"9": "14426",
"10": "14739",
"11": "13559",
"12": "16443",
"13": "31829",
"14": "35478",
"15": "10231",
"16": "13290",
"17": "17278",
"18": "20462",
"19": "15580",
"20": "23984",
"21": "10403",
"22": "1618",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "269712"
},
{
"5": "659",
"6": "11597",
"7": "20417",
"8": "24676",
"9": "28640",
"10": "25457",
"11": "20068",
"12": "10595",
"13": "32519",
"14": "69578",
"15": "25862",
"16": "26303",
"17": "22560",
"18": "19887",
"19": "26635",
"20": "20028",
"21": "22926",
"22": "1062",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "409469"
},
{
"5": "504",
"6": "5286",
"7": "7664",
"8": "11072",
"9": "11693",
"10": "15295",
"11": "11732",
"12": "16562",
"13": "24380",
"14": "30616",
"15": "19539",
"16": "20807",
"17": "16820",
"18": "17946",
"19": "18433",
"20": "19136",
"21": "10892",
"22": "1069",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "259446"
},
{
"5": "0",
"6": "0",
"7": "892",
"8": "2674",
"9": "5797",
"10": "4583",
"11": "3950",
"12": "4597",
"13": "9567",
"14": "11079",
"15": "8712",
"16": "4445",
"17": "7730",
"18": "11314",
"19": "8765",
"20": "6012",
"21": "2024",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-09-01",
"TOTAL": "92141"
},
{
"5": "0",
"6": "0",
"7": "1122",
"8": "3860",
"9": "6297",
"10": "10145",
"11": "5109",
"12": "4418",
"13": "9603",
"14": "11024",
"15": "9452",
"16": "5707",
"17": "9455",
"18": "11709",
"19": "11553",
"20": "12863",
"21": "3387",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "115704"
},
{
"5": "0",
"6": "0",
"7": "1249",
"8": "1490",
"9": "2929",
"10": "3167",
"11": "2296",
"12": "1622",
"13": "5161",
"14": "6910",
"15": "5696",
"16": "4660",
"17": "6864",
"18": "8956",
"19": "4401",
"20": "2165",
"21": "1284",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "58850"
},
{
"5": "0",
"6": "0",
"7": "2316",
"8": "5453",
"9": "8846",
"10": "4303",
"11": "6679",
"12": "2210",
"13": "5084",
"14": "5425",
"15": "3198",
"16": "6867",
"17": "7615",
"18": "12147",
"19": "6315",
"20": "3368",
"21": "608",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "80434"
},
{
"5": "0",
"6": "0",
"7": "908",
"8": "2185",
"9": "2425",
"10": "3377",
"11": "4844",
"12": "1796",
"13": "6801",
"14": "9511",
"15": "3421",
"16": "7216",
"17": "4512",
"18": "5040",
"19": "4484",
"20": "3189",
"21": "1436",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61145"
},
{
"5": "0",
"6": "1122",
"7": "9605",
"8": "13939",
"9": "10278",
"10": "15947",
"11": "5077",
"12": "6046",
"13": "8112",
"14": "10164",
"15": "7366",
"16": "3414",
"17": "4136",
"18": "7295",
"19": "3052",
"20": "4656",
"21": "3525",
"22": "1579",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "115313"
},
{
"5": "0",
"6": "0",
"7": "12694",
"8": "11191",
"9": "5931",
"10": "9017",
"11": "1188",
"12": "2331",
"13": "7590",
"14": "7265",
"15": "5924",
"16": "5627",
"17": "3456",
"18": "5135",
"19": "1634",
"20": "2104",
"21": "2470",
"22": "40",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "83597"
},
{
"5": "0",
"6": "966",
"7": "2207",
"8": "9208",
"9": "3125",
"10": "744",
"11": "2439",
"12": "198",
"13": "2605",
"14": "10346",
"15": "1634",
"16": "3985",
"17": "1211",
"18": "4821",
"19": "4428",
"20": "2118",
"21": "1113",
"22": "2627",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "53775"
},
{
"5": "0",
"6": "781",
"7": "12997",
"8": "8874",
"9": "5186",
"10": "2634",
"11": "2279",
"12": "3773",
"13": "3085",
"14": "9038",
"15": "7881",
"16": "1926",
"17": "4701",
"18": "3792",
"19": "1494",
"20": "2412",
"21": "10526",
"22": "1620",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "82999"
},
{
"5": "0",
"6": "376",
"7": "13712",
"8": "10799",
"9": "6039",
"10": "3902",
"11": "541",
"12": "4247",
"13": "4812",
"14": "9220",
"15": "2022",
"16": "4632",
"17": "6708",
"18": "2564",
"19": "1685",
"20": "9519",
"21": "3266",
"22": "1352",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "85396"
},
{
"5": "0",
"6": "1064",
"7": "5002",
"8": "7614",
"9": "2737",
"10": "3761",
"11": "1813",
"12": "1546",
"13": "6206",
"14": "9165",
"15": "3665",
"16": "2740",
"17": "3092",
"18": "4705",
"19": "3706",
"20": "2282",
"21": "2250",
"22": "434",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61782"
}
]

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);
var val = tableValue[i][col[j]]
if (val && !isNaN(val)) {
val = parseInt(val).toLocaleString('en-IN')
}
tabCell.innerHTML = (val);

if (j > 1)

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 - 如何在内部使用 JavaScript 为数字添加逗号分隔符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53337487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com