我有一些 javascript 可以解析 csv 文件并将内容放到表格中。
我正在使用一个非常通用的函数生成表格，该函数通过一个二维数组并构建一个 html 字符串。 然后我做
document.getElementById("StringTable").innerHTML = result;
我的表格生成得很好，非常适合我的需要。
我想应用一些 CSS 样式只是为了让它看起来更好看，但我似乎无法让我的 css 文件对表格产生任何影响。
我认为这是因为表格是在加载 css 后生成的，但我不确定如何解决这个问题。我能做什么？
HTML:
<body>
<div id="StrRecTable">
</div>
</body>
Javascript:
function makeTableHTML(array) {
var result = "<table border=2, width=1000px>";
result += "<thead><tr><th>Date</th><th>D_1</th><th>D_2</th><th>D_3</th><th>D_4</th><th>D_5</th><th>D_6</th></thead><tbody>";
// Create header row. Better way to do this?
//for (var i = 0; i < array.length; i++) {
for (var i = array.length-1; i > 0; i--) {
result += "<tr>";
for (var j = 0; j < array[i].length; j++) {
result += "<td>"+array[i][j]+"</td>";
}
result += "</tr>";
}
result += "</tbody></table>";
document.getElementById("StrRecTable").innerHTML = result;
}
CSS:(这是从某个网站自动生成的。我只是想尝试一下。
body {background-color:#888888;}
.StrRecTable {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #125b07;
-moz-border-radius-bottomleft:25px;
-webkit-border-bottom-left-radius:25px;
border-bottom-left-radius:25px;
-moz-border-radius-bottomright:25px;
-webkit-border-bottom-right-radius:25px;
border-bottom-right-radius:25px;
-moz-border-radius-topright:25px;
-webkit-border-top-right-radius:25px;
border-top-right-radius:25px;
-moz-border-radius-topleft:25px;
-webkit-border-top-left-radius:25px;
border-top-left-radius:25px;
}.StrRecTable table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.StrRecTable tr:last-child td:last-child {
-moz-border-radius-bottomright:25px;
-webkit-border-bottom-right-radius:25px;
border-bottom-right-radius:25px;
}
.StrRecTable table tr:first-child td:first-child {
-moz-border-radius-topleft:25px;
-webkit-border-top-left-radius:25px;
border-top-left-radius:25px;
}
.StrRecTable table tr:first-child td:last-child {
-moz-border-radius-topright:25px;
-webkit-border-top-right-radius:25px;
border-top-right-radius:25px;
}.StrRecTable tr:last-child td:first-child{
-moz-border-radius-bottomleft:25px;
-webkit-border-bottom-left-radius:25px;
border-bottom-left-radius:25px;
}.StrRecTable tr:hover td{
}
.StrRecTable tr:nth-child(odd){ background-color:#7f7f7f; }
.StrRecTable tr:nth-child(even) { background-color:#333333; }.StrRecTable td{
vertical-align:middle;
border:1px solid #125b07;
border-width:0px 1px 1px 0px;
text-align:left;
padding:5px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#ffffff;
}.StrRecTable tr:last-child td{
border-width:0px 1px 0px 0px;
}.StrRecTable tr td:last-child{
border-width:0px 0px 1px 0px;
}.StrRecTable tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.StrRecTable tr:first-child td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #5fbf00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #5fbf00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #5fbf00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#5fbf00"); background: -o-linear-gradient(top,#5fbf00,5fbf00);
background-color:#5fbf00;
border:0px solid #125b07;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:12px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.StrRecTable tr:first-child:hover td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #5fbf00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #5fbf00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #5fbf00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#5fbf00"); background: -o-linear-gradient(top,#5fbf00,5fbf00);
background-color:#5fbf00;
}
.StrRecTable tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.StrRecTable tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
编辑以添加 HTML/CSS
最佳答案
CSS 使用 .StrRecTable 类，但您的 JavaScript 通过 id 引用它
document.getElementById("StrRecTable").innerHTML = result;
将类添加到 div 将起作用，或者在 CSS 中引用 ID:
<body>
<div id="StrRecTable" class="StrRecTable">
</div>
</body>
这是一个JSFiddle它与更新后的 CSS 一起工作以引用持有者 DIV 的 ID。
关于javascript - 为使用 Javascript 生成的表格设置样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19863579/