如何为具有相似值的动态表行设置不同的背景颜色？

Question

在我的应用程序中，我需要根据类似的td值（动态数据）为表行设置不同的背景颜色。我试图实现这一点，但我无法将表格行分组为不同的背景颜色。我已将预期结果屏幕上限与小提琴链接相关联。 fiddle

HTML CODE

<table>
    <tr>
        <th>roll</th>
        <th>name</th>
        <th>Random number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Name 1</td>
        <td>73023-04041</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Name 2</td>
        <td><span>73023-04042</span></td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Name 3</td>
        <td><span>73023-04040</span></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Name 4</td>
        <td><span>73023-04042</span></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Name 5</td>
        <td><span>73023-04041</span></td>
    </tr>
</table>

JS CODE

$("table tr td:nth-child(2)").each(function () {
    var tdVal = $(this).children().find("span").text();
    var valueColor = $(this).children().find("span").text();
    if (valueColor == tdVal) {
        //alert("if");
        $(this).parent("tr").addClass("trColor");
    }
});

预期结果

Answer 1

这是我的jsfiddle与工作代码。你需要在css中给出多个类并分配不同的颜色。

https://jsfiddle.net/SmitRaval/t5ft82z2/58/

HTML

<table>
    <tr>
        <th>roll</th>
        <th>name</th>
        <th>Random number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Name 1</td>
        <td><span>73023-04041</span></td>
    </tr>   
    <tr>
        <td>2</td>
        <td>Name 2</td>
        <td><span>73023-04042</span></td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Name 3</td>
        <td><span>73023-04040</span></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Name 4</td>
        <td><span>73023-04042</span></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Name 5</td>
         <td><span>73023-04041</span></td>
    </tr>
</table>

CSS

table td {
    border:1px solid #000;
}
.trColor0 {
    background-color:pink;
}
.trColor1 {
    background-color:red;
}
.trColor2 {
    background-color:blue;
}
.trColor3 {
    background-color:green;
}
.trColor4 {
    background-color:yellow;
}

JS

$(document).ready(function(){
    var i = 0;
    $("table tr td:nth-child(3)").each(function () {
        var tdVal = $(this).text();
       $("table tr td span").each(function(){
           if(tdVal == $(this).text()){
               $(this).closest("tr").addClass("trColor"+i);
           }
       });
       i++;
    });
});

Answer 2

您可以在每个循环中使用过滤器：

var $lastChildren = $("tbody td:last-child");  // get all last children
var colourCounter = 1;

$lastChildren.each(function() {                // loop
  var $child = $(this);                        // get the current child
  if (!$child.hasClass('coloured')) {          // check if it has already been coloured
    var testNumber = $child.text();            // if not get the text
    
    var $filtered = $lastChildren.filter(function() {
      return $(this).text() === testNumber;    // filter any other children with same text
    })
    
    if ($filtered.length) {
      $filtered.addClass('coloured')                      // add class to say it is colored (and not include in further tests)
        .parent().addClass('trColor' + colourCounter);    // add colour class to row
        
        colourCounter++;
    }
  }
});

/* not sure how you were going to do this colouring - I've used an incremental counter */
.trColor1 {
  background-color:green;
}
.trColor2 {
  background-color:lightblue;
}
.trColor3 {
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>roll</th>
      <th>name</th>
      <th>Random number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Name 1</td>
      <td>73023-04041</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Name 2</td>
      <td><span>73023-04042</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Name 3</td>
      <td><span>73023-04040</span></td>
    </tr>
    <tr>
      <td>4</td>
      <td>Name 4</td>
      <td><span>73023-04042</span></td>
    </tr>
    <tr>
      <td>5</td>
      <td>Name 5</td>
      <td><span>73023-04041</span></td>
    </tr>
  </tbody>
</table>

Answer 3

您也可以查看一段代码。

基本上，我正在创建一个具有所需键的对象，并且各自的颜色与它们相关联。

＆＃13;

＆＃13;

	var colorMap = {};
	$("table tr td:nth-child(3)").each(function () {
  		var tdVal = $(this).find("span").text();
       //alert(tdVal);
            
       if(checkItemExist(tdVal,colorMap) == false)
       	 colorMap[tdVal] = 'trColor'+ (Object.keys(colorMap).length+1)+'';
         
         //alert(JSON.stringify(colorMap));
        
            $(this).parent("tr").addClass(colorMap[tdVal]);
    });
    
    function checkItemExist(item,array){
    
    	for (var k in array){
    		if (k == item){
                return true;
    		}
		}	
        
        return false;
    //colorMap.indexOf(tdVal) == -1
    }

＆＃13;

table td{
  border:1px solid #000;
}
.trColor1{
  background-color:pink;
}
.trColor2{
 background-color:red; 
}
.trColor3{
 background-color:green; 
}
.trColor4{
 background-color:blue; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>

<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>



</table>

＆＃13;

＆＃13;

＆＃13;