How to set different background color for dynamic table row with similar values?

Question

In my application I am in need to set different background color to table row based on similar td value which is dynamic data. I tried to achieve this but I was unable to group the table row with different background color. I have attached the expected result screen-cap along with the fiddle link. 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");
    }
});

Expected Result

Answer 1

Here is my jsfiddle with working code. You need to give multiple classes in css and assign different colors.

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

You could use a filter in an each loop:

 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

You can have a look at following a piece of code as well.

Basically, I am creating an object with desired keys with respective Colors associated with them.

  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 } 

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

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