Строка таблицы цветов на основе значения столбца

Question

У меня есть таблица html, и я хочу покрасить строки на основе значения в первом столбце этой строки. Если значение «ПОДТВЕРЖДЕНО», я хочу, чтобы цвет был зеленым, и если он «НЕОПРЕДЕЛЕН», я хочу покрасить строку красным цветом.

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'); 
     } 
    }); 
}); 

CSS-выглядит следующим образом:

.selected { 
background-color: green; 
    color: #FFF; 
} 

.bad { 
    background-color: red; 
    color: #FFF; 
} 

таблица HTML генерируется из панд dataframe на мой взгляд, Джанго и прошел в например:

<div class="table-responsive" style="margin-left: 15%; margin-right: 15%; overflow:auto;"> 
    {{ datatable | safe }} 
</div> 

Проблема в том, что она окрашивает все мои ряды красным цветом. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Поскольку вы используете ==="CONFIRMED", убедитесь, что это действительно: UPPERCASE, и что в HTML-формате нет начальных или конечных пробелов " CONFIRMED" или "CONFIRMED ".

код вы показываете окрасит .selected весь ряд :eq(1) TD Whos имеет "ПОДТВЕРЖДЕНО" содержание:

$(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>

ничего плохого о нем.

Если это не то, что вы видите на своем экране, обратите внимание, что индекс :eq() основан на индексе, а индекс индекса начинается с 0, так что :eq(0), вероятно, что вы хотите?

Другая возможная вещь, что вы не точное содержание строки устанавливается как "CONFIRMED", но, вероятно, есть некоторые пробелы до или после - поэтому убедитесь, что обрезать их с помощью $.trim()

if($.trim(col_val) === "CONFIRMED") 

если вы дополнительно хотим, чтобы сделать код еще более гибким в верхнем регистре или капитализацию вы можете сделать, как:

if($.trim(col_val.toLowerCase()) === "confirmed") 
// Will work on "CONFIRMED", "Confirmed", "conFIRMed" etc 

Answer 2

Если вы ищете первый столбец в строке вы бледная т использовать:

var col_val = $(this).find("td:eq(0)").text(); 

td:eq(1) Изменение к td:eq(0)

Answer 3

Чтобы найти первый столбец в строке, вы хотите использовать селектор first-child. Вы можете выполнять итерацию по каждому первому столбцу с помощью функции each.

Затем мы рассмотрим текст и добавим соответствующий класс к родительскому элементу столбца (tr).

$(document).ready(function() { 
    $("td:first-child").each(function() { 
     if ($(this).text() === "Confirmed") { 
      $(this).parent().addClass("green"); 
     } 
     else { 
      $(this).parent().addClass("red"); 
     } 
    }); 
}); 

http://jsfiddle.net/cw43ejjf/