如何右對齊或左對齊表數據並為JSON數據中HTML表中的任何行着色
[英]How to align table data Right or left and color any row in HTML table from JSON Data
問題描述
var tableValue = [ { "5": "15942", "6": "46456", "7": "149079", "8": "231616", "9": "221235", "10": "189642", "11": "144417", "12": "188025", "13": "335321", "14": "405479", "15": "280150", "16": "234051", "17": "243563", "18": "276148", "19": "258459", "20": "228403", "21": "145696", "22": "14966", "OUTLET": "", "BILLDATE": "TOTAL", "TOTAL": "3608648" }, { "1": "0", "2": "0", "3": "0", "4": "0", "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", "BILLDATE": "2018-08-01", "TOTAL": "291589" }, { "1": "0", "2": "0", "3": "0", "4": "0", "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": "", "BILLDATE": "2018-08-02", "TOTAL": "296125" } ] function addTable() { var col = Object.keys(tableValue[0]); // get all the keys from first object var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); 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]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("newTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); } addTable()
table, th, td { border: solid 1px #DDD; }
<table id="newTable" class="table table-striped"> </table>
我正在制作一個html表，HTML表的數據來自Java端，以JSON的形式來自Java端，我正在其中填充html表。
我想要的是將所有數字數據向右對齊，並將字母數據向左對齊，並希望將單行文本的顏色設置為深黑色。
這是我的代碼
<table id="newTable" class="table table-striped">
</table>
<script>
var tableValue = [
{
"5": "15942",
"6": "46456",
"7": "149079",
"8": "231616",
"9": "221235",
"10": "189642",
"11": "144417",
"12": "188025",
"13": "335321",
"14": "405479",
"15": "280150",
"16": "234051",
"17": "243563",
"18": "276148",
"19": "258459",
"20": "228403",
"21": "145696",
"22": "14966",
"OUTLET": "",
"BILLDATE": "TOTAL",
"TOTAL": "3608648"
},
{
"1": "0",
"2": "0",
"3": "0",
"4": "0",
"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",
"BILLDATE": "2018-08-01",
"TOTAL": "291589"
},
{
"1": "0",
"2": "0",
"3": "0",
"4": "0",
"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": "",
"BILLDATE": "2018-08-02",
"TOTAL": "296125"
}
]
function addTable() {
var col = Object.keys(tableValue[0]); // get all the keys from first object
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
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]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
addTable()
</script>
這是我的CSS
table, th, td
{
border: solid 1px #DDD;
text-align: right;
}
</style>
我只想知道如何將文本向左或向右對齊，以及如何使用JavaScript給粗體文本或行中的任何一行加顏色
2 個解決方案
解決方案1
0 2018-10-22 06:44:01
在表中添加與您在標頭中使用的類相同的tr或僅在下面添加
style="font-weight:bold"
對於leftalign，請轉到td並添加以下內容
<td align="left">
解決方案2
0 2018-10-22 07:14:29
在這里，我創建了示例代碼，希望對您有所幫助。 默認情況下，每個元素都采用float：left屬性。
table { border: 1px solid black; width: 100%; } th, td { text-align: left; padding: 8px; } tr { border: 1px solid black; } .right { float: right; } tr:nth-child(even) { background-color: #ccc; }
<table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>jhon</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td class="right">Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td></td> <td>Swanson</td> <td>$300</td> </tr> </table>
使用jQuery這樣做
$(document).ready(function(){
$('#tablecontent tr:eq(2) > td:first-child').addClass('right');
$('#tablecontent tr:nth-child(even)').css('background-color', '#cccccc');
});
HTML / CSS / JavaScript：如何根據數據更改表格行的顏色
[英]HTML/CSS/JavaScript: How to change color of table row based on data
在 json 數組的表格列中從左到右動態顯示數據結果
[英]Dynamically displaying data results from left to right in table columns from json array
通過在表中垂直添加數據或將行數據轉換為列數據，從表中的任何 api 動態顯示 json 數據
[英]display json data dynamically from any api in table by adding data in table vertically or convert row data to column data
我該如何隱藏 <td> 從json數據創建html表時排成一行？
[英]How can I make a hidden <td> row while creating html table from json data?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.