[英]Color the cell of a table depending on the value using javascript
I am trying to color cells of an HTML table (which is automatically generated by Python and Django) depending on cells' content.我正在尝试根据单元格的内容为 HTML 表格(由 Python 和 Django 自动生成)的单元格着色。
Here is my table.这是我的桌子。 I would like to color only the column "status".我只想为“状态”列着色。 When there is the word "Cloture" I would like to color the cell in green :当有“Cloture”这个词时,我想将单元格涂成绿色:
My table is generated by Python and Django with this code :我的表是由 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>
This is how one row of my table is in HTML :这就是我的表格的一行在 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>
I tried something in JQuery but it doesn't work :我在 JQuery 中尝试了一些东西,但它不起作用:
$('select').closest(function(){
if($(this).val() === 'Cloture') {
$(this).parent().css({
'background-color': 'green'
});
}else{
$(this).parent().css({
'background-color': 'white'
});
}
})
CSS code associated to the JQuery solution :与 JQuery 解决方案关联的 CSS 代码:
.green {
background-color: lightgreen;
}
.white {
background-color: white;
}
If someone sees a solution using javascript that would be really helpful !如果有人看到使用 javascript 的解决方案,那将非常有帮助!
Try this:尝试这个:
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 am </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.