Table ignoring styling color-CodePudding

I'm using JavaScript to identify rows with specific values and paint the entire row red, the code itself seems to be running fine, because I can see it is indeed adding the style to the table row, but it's only painting one row (maybe only the last?)

Can you guys help me understand whats happening?

Just to context, I'm using a python library called pretty-html-table that auto creates these tables with pre-set html components.

I also tried adding specific class to the tr and adding !important to the style tag, like these:

$('.dataframe tr').filter(function(){
   return $.trim($('td', this).eq(0).text())=="Sim";
}).addClass('redcolor');

Here is the fiddle

Or snipper below

$('.dataframe tr').filter(function(){
   return $.trim($('td', this).eq(0).text())=="Sim";
}).css('color', 'red');

<table border="0" >
<thead>
  <tr style="text-align: right;">
    <th style="background-color: #FFFFFF;font-family: sans-serif;font-size: medium;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 0px 20px 0px 0px;width: auto">Bloq?</th>
    <th style="background-color: #FFFFFF;font-family: sans-serif;font-size: medium;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 0px 20px 0px 0px;width: auto">TES</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Não</td>
    <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">218</td>
  </tr>
  <tr style="color: red;">
    <td style="background-color: white; color: black;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Sim</td>
    <td style="background-color: white; color: black;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">236</td>
  </tr>
  <tr style="color:red;">
    <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Sim</td>
    <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">237</td>
  </tr>
</tbody>
</table>

CodePudding user response：

Problem seems to be that you are trying to set the color on the tr and not the td, so add .find("td") before your .css('color', 'red')

Demo

$('.dataframe tr').filter(function() {
  return $.trim($('td', this).eq(0).text()) == "Sim";
}).find("td").css('color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" >
  <thead>
    <tr style="text-align: right;">
      <th style="background-color: #FFFFFF;font-family: sans-serif;font-size: medium;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 0px 20px 0px 0px;width: auto">Bloq?</th>
      <th style="background-color: #FFFFFF;font-family: sans-serif;font-size: medium;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 0px 20px 0px 0px;width: auto">TES</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Não</td>
      <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">218</td>
    </tr>
    <tr style="color: red;">
      <td style="background-color: white; color: black;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Sim</td>
      <td style="background-color: white; color: black;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">236</td>
    </tr>
    <tr style="color:red;">
      <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">Sim</td>
      <td style="background-color: #EDEDED;font-family: sans-serif;font-size: medium;text-align: left;padding: 0px 20px 0px 0px;width: auto">237</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

if you want to change the colors , delete color: black; style from second row td tags.