Javascript 基于列值的颜色表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32748771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Color table row based on column value
提问by kdubs
I have an html table and I want to color the rows based on the value in the first column of that row. If the value is "CONFIRMED" I want to color the row green, and if it is "UNCONFIRMED" I want to color the row red.
我有一个 html 表，我想根据该行第一列中的值为行着色。如果值为“CONFIRMED”，我想将行着色为绿色，如果值为“UNCONFIRMED”，我想将行着色为红色。
The JS I am using to do this is:
我用来执行此操作的 JS 是：
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "CONFIRMED"){
$(this).addClass('selected'); //the selected class colors the row green//
} else {
$(this).addClass('bad');
}
});
});
The CSS looks like this:
CSS 看起来像这样：
.selected {
background-color: green;
color: #FFF;
}
.bad {
background-color: red;
color: #FFF;
}
The html table is generated from a pandas dataframe in my Django view and passed in like this:
html 表是从我的 Django 视图中的 Pandas 数据帧生成的，并像这样传入：
<div class="table-responsive" style="margin-left: 15%; margin-right: 15%; overflow:auto;">
{{ datatable | safe }}
</div>
The problem is that it's coloring all of my rows red. Can anyone tell me what I'm doing wrong?
问题是它把我所有的行都涂成红色。谁能告诉我我做错了什么？
回答by Roko C. Buljan
Since you use ==="CONFIRMED"make sure it's really: UPPERCASE, and that there's no leading or ending spaces " CONFIRMED"or "CONFIRMED "in the HTML.
由于您使用==="CONFIRMED"确保它真的：大写，并且没有前导或结尾空格" CONFIRMED"或者"CONFIRMED "在HTML。
The code you're showing will color .selectedthe entire row whos :eq(1)TD has the "CONFIRMED" content:
您显示的代码将为TD 具有“CONFIRMED”内容.selected的整行着色:eq(1)：
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "CONFIRMED"){
$(this).addClass('selected'); //the selected class colors the row green//
} else {
$(this).addClass('bad');
}
});
});.selected{
background-color:green;
}
.bad{
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td><td>CONFIRMED</td>
</tr>
<tr>
<td>2</td><td>UNCONFIRMED</td>
</tr>
</table>nothing bad about it.
没什么不好的。
if that's not what you see on your screen note that :eq()is index based, and elements index start at 0so :eq(0)is probably what you want?
如果这不是您在屏幕上看到的:eq()基于索引的注释，并且元素索引开始于，0那么:eq(0)这可能是您想要的？
Another probable thing is that you don't have the exact content string set as "CONFIRMED"but probably there's some spaces before or after - so make sure to trim them using $.trim()
另一个可能的事情是您没有将确切的内容字符串设置为，"CONFIRMED"但之前或之后可能有一些空格 - 因此请确保使用修剪它们$.trim()
if( $.trim(col_val) === "CONFIRMED" )
if you additionally want to make your code even more flexible about the UPPERCASE or Capitalization you can do as:
如果您还想让您的代码在大写或大写方面更加灵活，您可以这样做：
if( $.trim(col_val.toLowerCase() ) === "confirmed" )
// Will work on "CONFIRMED", "Confirmed", "conFIRMed" etc
回答by Tan Ory Jaka Perdana
<style>
tr[data-stat="confirmed"]{
background-color: green;
color: #fff;
}
tr[data-stat="unconfirmed"]{
background-color: red;
color: #fff;
}
</style>
<table>
<tr data-stat="confirmed">
<td>1</td>
<td>Confirmed</td>
<td>bla.. bla.. bla..</td>
</tr>
<tr data-stat="unconfirmed">
<td>2</td>
<td>Not Confirmed</td>
<td>bla.. bla.. bla..</td>
</tr>
</table>
回答by Richard Hamilton
To find the first column in a row, you want to use the first-childselector. You can iterate over every first column with the eachfunction.
要查找一行中的第一列，您需要使用first-child选择器。您可以使用该each函数迭代每一列。
We then look at the text and then add the appropriate class to the column's parent (tr).
然后我们查看文本，然后将适当的类添加到列的父级 ( tr)。
$(document).ready(function() {
$("td:first-child").each(function() {
if ($(this).text() === "Confirmed") {
$(this).parent().addClass("green");
}
else {
$(this).parent().addClass("red");
}
});
});
回答by guestposter
If you are looking for the first column in the row you want to use:
如果您要查找要使用的行中的第一列：
var col_val = $(this).find("td:eq(0)").text();
Change the td:eq(1)to td:eq(0)
更改td:eq(1)为td:eq(0)
