表格忽略樣式顏色

我正在使用 JavaScript 來識別具有特定值的行并將整行繪制為紅色，代碼本身似乎運行良好，因為我可以看到它確實將樣式添加到表格行，但它只繪制一行（也許只有最后一個？）

你們能幫我理解發生了什么嗎？

就背景關系而言，我正在使用一個名為 pretty-html-table 的 python 庫，它使用預設的 html 組件自動創建這些表。

我還嘗試將特定類添加到 tr 并將 !important 添加到樣式標簽，如下所示：

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

這是小提琴

或下方截圖

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

<table border="0" class="dataframe">
<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>

uj5u.com熱心網友回復：

問題似乎是您試圖在tr而不是設定顏色td，所以.find("td")在您之前添加.css('color', 'red')

演示

顯示代碼片段

$('.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" class="dataframe">
  <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>

uj5u.com熱心網友回復：

如果要更改顏色，請從第二行標簽中洗掉color: black;樣式。td

標籤：javascript html jQuery css

上一篇：React-列出具有不同引數的圖示

下一篇：在輸入欄位中放置兩個圖示