Question

我有HTML表格。基于td值，我需要改变细胞的颜色。以下是表格：

如何在td值上检查和应用条件。

ent<table border="1">
<tr bgcolor="#6699FF">
    <th>Name</th>
    <th>DOJ</th>
    <th>BAU</th>
<tr>
    <td>Rahul</td>
    <td>Jan</td>
    <td>z</td>
</tr>
<tr>
    <td>Ravi</td>
    <td>Feb</td>
    <td>z</td>
</tr>

Answer 1

好的，所以你需要使用javascript来获取值。 HTML本身就是静态的。 JS是一种脚本语言，可以动态地更改您想要的内容。在这个答案中我使用jquery作为它的共同点。如果您只想循环选项卡并根据值为每个单元格指定颜色，请使用：

var cell = $('td'); 

cell.each(function() { //loop through all td elements ie the cells

var cell_value = $(this).html(); //get the value

if (cell_value == 1) //if then for if value is 1
    $(this).css({'background' : 'red'});   // changes td to red.
});

所以从那里你只需要添加if then或切换到switch语句。希望对你有所帮助！如果你只关心某个单元格然后给它分配一个类，那么只需使用这个代码：

var cell = $('.CLASSNAMEHERE'); 

cell.each(function() { //loop through all td elements ie the cells

var cell_value = $(this).html(); //get the value

if (cell_value == 1) //if then for if value is 1
    $(this).css({'background' : 'red'});   // changes td to red.
});

如果要突出显示整行，请使用以下代码：

 $(this).parent().css({'background' : 'red'});   // changes row to red.

Answer 2

JS是你最好的选择。以下是适合您情况的JS代码：

td_array = document.getElementsByTagName("td");
check_value = "Rahul";

for (i = 0; i < td_array.length; i++){
  if (td_array[i].textContent == check_value){
    td_array[i].style.color = "red";
  };
};

此代码循环显示 td 元素，如果td文本与 check_value 匹配，则会为该红色的文本着色。

你可以在这里找到工作的JSFiddle：https://jsfiddle.net/darkisa/36ogjayb/

基于td值需要在html中做颜色

2 个答案: