如何将 CSS 添加到使用 javascript 创建的动态表中
基本上我在 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>
报告.组件.js
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));
}
report.component.scss（更长，但这是我想要工作的部分）
.tablestyle{
font-weight: bold;
}
慕码人80568582回答
-
临摹微笑
为您制作了一段代码，以向您展示它的工作原理。也许您的实际样式表存在矛盾。请注意将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
添加table.className = 'tablestyle'或者table.setAttribute("class", "tablestyle");
随时随地看视频慕课网APP
相关分类
JavaScript