基本上我在 javascript 上创建一个动态表并将其显示在 html 页面中。我还有一个适用于静态元素的 css 文件，但不适用于我动态创建的表格。我可以做什么来设计动态创建的表格的样式？我已经尝试过这个：table.classList.add('tablestyle');但它不起作用。正如你可以想象的那样，我对这类事情绝对是新手。我有3个文件：reports.component.ts（包含 html。对 sccs 和 js 的引用位于文件中，并且它们可以正常工作）<html><div class="block"> <h1>STORICO DEI DATI</h1> <div id="myDynamicTable" class="table"> <body onload="Javascript:addTable()"></body> </div> </div></html>报告.组件.jsfunction addTable() { let colonne = Math.floor(Math.random() * 5)+2; let righe = Math.floor(Math.random() * 5)+2; var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; let providers = ["p1", "p2", "p3", "np4", "p5"]; let testcases = ["tc1", "tc2", "tc3", "tc4", "tc5"]; var myTableDiv = document.getElementById("myDynamicTable"); var table = document.createElement('table'); table.classList.add('tablestyle'); var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i=0; i<righe; i++){ var tr = document.createElement('tr'); tr.style.backgroundColor = 'red'; tableBody.appendChild(tr); for (var j=0; j<colonne; j++){ var td = document.createElement('td'); td.width='75'; if(i==0){ if(j==0){ //prima casella addCell(td, tr, today); } else { //prima riga addCell(td, tr, providers[j-1]); } } else { if(j==0){ //prima colonna addCell(td, tr, testcases[i-1]); } else { addCell(td, tr, Math.floor(Math.random() * 50)); }report.component.scss（更长，但这是我想要工作的部分）.tablestyle{ font-weight: bold;}
2 回答
临摹微笑
TA贡献1982条经验 获得超2个赞
为您制作了一段代码，以向您展示它的工作原理。也许您的实际样式表存在矛盾。
请注意将body标签放置在正确的层次结构中。
function addTable() {
let colonne = Math.floor(Math.random() * 5)+2;
let righe = Math.floor(Math.random() * 5)+2;
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
let providers = ["p1", "p2", "p3", "np4", "p5"];
let testcases = ["tc1", "tc2", "tc3", "tc4", "tc5"];
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('table');
table.classList.add('tablestyle');
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i=0; i<righe; i++){
var tr = document.createElement('tr');
tr.style.backgroundColor = 'red';
tableBody.appendChild(tr);
for (var j=0; j<colonne; j++){
var td = document.createElement('td');
td.width='75';
if(i==0){
if(j==0){ //prima casella
addCell(td, tr, today);
}
else { //prima riga
addCell(td, tr, providers[j-1]);
}
}
else {
if(j==0){ //prima colonna
addCell(td, tr, testcases[i-1]);
}
else {
addCell(td, tr, Math.floor(Math.random() * 50));
}
}
}
}
myTableDiv.appendChild(table);
}
function addCell(td, tr, valoreCella){
td.appendChild(document.createTextNode(valoreCella));
tr.appendChild(td);
}
.tablestyle{
font-weight: bold;
color: green
}
<body onload="addTable()">
<div class="block">
<h1>STORICO DEI DATI</h1>
<div id="myDynamicTable" class="table">
<!--JS-->
</div>
</div>
</body>
Qyouu
TA贡献1786条经验 获得超11个赞
添加
table.className = 'tablestyle'
或者
table.setAttribute("class", "tablestyle");添加回答
举报
0/150
提交
取消