0

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;
}
ruleboy21
  • 5,510
  • 4
  • 17
  • 34
eloy guides
  • 11
  • 2
  • Could you provided a larger portion of the script, so we can see what you are trying to achieve overall? – ChazUK Feb 23 '22 at 11:04

2 Answers2

1

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

A.Amayreh
  • 120
  • 1
  • 4
  • yeah it work but what I want is on each loop. meaning every loop for example I have 3 loop on every loop I want to style the 1st tr – eloy guides Feb 22 '22 at 13:32
0

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

eloy guides
  • 11
  • 2
  • Maybe you could provide the code examples in code blocks rather than inline code formatting to show off your answer more concisely. Also you could provide a full JavaScript snippet. – ChazUK Feb 23 '22 at 11:02