如何在使用内部html的同时，为for循环中的第一个表行添加使用css的样式

Question

我只想在内部HTML表的第一个tr中添加样式，我该怎么做？

for (i = 0; i <= years_in_months; i++) {
var powint1 = compound * (Math.pow(interest, i));
powint1 = powint1.toFixed(0);

var ointerest = (interest - 1)*100;
ointerest = ointerest.toFixed(0); 
tableHTML = tableHTML + "<tr><td>" + months2[i] + "</td><td> " + ointerest + "%"+"</td><td>"+ "$"+powint1 +"</td></tr>";
document.getElementById("tdisplay").innerHTML = "<thead><tr><th>Month</th><th>Interest</th><th>Total Amount</th></tr></thead>"+ tableHTML;
} 

Answer 1

在你的css中使用这个：

#tdisplay tr:nth-of-type(1) {
/* Your Style*/
}

请参阅CSS:nh-of-type((Selector

您可能想要将document.getElementById("tdisplay").innerHTML = ...移动到循环之外

Answer 2

我用自己的方法得到了答案，我只是添加了class并在上面加上I的值，然后做CSS。

tableHTML = tableHTML + "<tr class='table-"+[i]+"'><td>" + months2[i] + "</td><td> " + ointerest + "%"+"</td><td>"+ "$"+powint2 +"</td></tr>";

CSS

.table-0{background-color:yellow;}