根据使用 javascript 的值为 table 的单元格着色

Question

我正在尝试根据单元格的内容为 HTML table（由 Python 和 Django 自动生成）的单元格着色。

这是我的table。我只想给“状态”栏上色。当出现“Cloture”这个词时，我想将单元格涂成绿色：

我的 table 由 Python 和 Django 使用此代码生成：

 <table class="list_homepage" id="myTable">

        {% for field_name in action_fields_name %}
        <th>{{ field_name }}</th>
        {% endfor %}

        {% for action in action %}
        <tr class="table-row">
        <td>
            <a style="color: #ff0000; text-align: center;" href="{% url 'action-delete' action.0.1 %}"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="{% url 'action-update' action.0.1 %}"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="{% url 'action-detail' action.0.1 %}">Detail</a></td>

            {% for field in action %}
            <td>{{ field.1 }}</td>

            {% endfor %}
        </tr>

        {% endfor %}
    </table>

这就是我的 table 的一行在 HTML 中的样子：

<tr class="table-row">
        <td style="border-bottom: 1px solid black;";>
            <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/13/">Detail</a></td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>13</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>Panne THM 08</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>May 12, 2022, midnight</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>Cloture</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>May 9, 2022, 11:30 a.m.</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>METRO</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>METRO</td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;";>Romain</td>

            
        </tr>

我在 JQuery 中尝试了一些方法，但它不起作用：

$('select').closest(function(){
        if($(this).val() === 'Cloture') {
      $(this).parent().css({
        'background-color': 'green'
      });
    }else{
        $(this).parent().css({
        'background-color': 'white'
      });
    }
})

CSS 与 JQuery 解决方案关联的代码：

.green {
       background-color: lightgreen;
       }

.white {
       background-color: white;
       }

如果有人看到使用 javascript 的解决方案，那将非常有帮助！

Answer 1

试试这个：

function changeColor() {
  var td = $("#myTable" + " td");
  $.each(td, function(i) {
 
    if ($(td[i]).html() == 'Cloture') {
      $(td[i]).addClass("green");
    } else {
      $(td[i]).addClass("white");
    }
  });
}

changeColor();

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
td {
  background: #FFFFFF;
  padding: 20px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
td:last-child {
  border-right: 0px;
}
.green {
  background-color: lightgreen !important;
}

.white {
  background-color: white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
   <tr class="table-row">
      <td style="border-bottom: 1px solid black;">
         <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
         <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
         <br>
         <a style="; text-align: center;" href="/action/13/">Detail</a>
      </td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">Panne THM 08</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">METRO</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">METRO</td>
      <td style="color: black; text-align: center; border-bottom: 1px solid black;">Romain</td>
   </tr>
</table>

根据使用 javascript 的值为 table 的单元格着色

Color the cell of a table depending on the value using javascript

html

javascript

html-table

django-templates

django-forms