How to add style using css for my first table row in for loop while using inner html-CodePudding

I just want to add style in my first tr on my inner HTML table how could I do this?

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;
}

CodePudding user response：

Use this in your css:

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

See CSS :nth-of-type() Selector

You may want to move document.getElementById("tdisplay").innerHTML = ... outside the loop

CodePudding user response：

I got the answer with my own, I just added class and put the value of i on it then do the CSS.

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

CSS

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