-1

I have an html like below

<div class="DGClass">
  <div>
    <div>
      <table>
        <tr>
          <td>aasf</td>
          <td>asf</td>
          <td>asdf</td>
        </tr>
        <tr>
          <td>asdf</td>
          <td>asdf</td>
          <td>asf</td>
        </tr>
        <tr>
          <td>asdf</td>
          <td>asdf</td>
          <td>asf</td>
        </tr>
      </table>
    </div>
  </div>
</div>

I Change second row's, second column's background. This is my css code

.DGClass  *  tr:nth-child(2) > td:nth-child(2)   {
    background-color: red !important ;
}

But I want to change cells background color by parameter in TypeScript. How can I do that?

hbaltuntel
  • 77
  • 2
  • 11
  • 2
    What do you mean by "parameter-ly"? Do you want to change the cell based on external data? Do you want the colors to behave a certain way? – loomy Aug 20 '22 at 20:39
  • Does this help? https://stackoverflow.com/a/1577204/4225384 – qrsngky Aug 21 '22 at 13:31
  • @loomy sorry for language. I want to change cell's backgournd based on row and column numbers. I did it with answer below – hbaltuntel Aug 22 '22 at 12:22

1 Answers1

1

If dom already rendered, u can select nodes with browser DOM API and set attribute directry

const DesiredColor = "red"; 
const Elements = document.querySelectorAll(".DGClass  *  tr:nth-child(2) > td:nth-child(2)");

[...Elements].map( Element => Element.style.backgroundColor = `${DesiredColor} !important` );

If you white code in some declarative way, you can use JSS, or any of another styling library.

Игорь Исаев
  • 96
  • 3