[jQuery] Re: Change row colors of table based on content

Charlie Mon, 19 Oct 2009 20:19:35 -0700

I try to learn as much as I can from this sort of exercise.

I made a couple of revisions to previously untested version, went back and made a couple of syntax and code fixes to previously untested suggestion

I only submit this because it works on a limited sized table with simple names, not suggesting that it is highly efficient or not, and always open to learning why something isn;t efficient. Have been told in past not to use attr() but still not sure why.

tested this in FF and IE
live version : http://jsbin.com/ayaji

js:
$(document).ready(function() {
       var colorArray=["red","blue","green","orange","black"];
        var colorCount=0;
        $("# table tr").each(function() {
            var classname= $(this).find("td").eq(1).text();
            if ($("."+classname).length >0) {
            var thisStyle=$("."+classname).eq(0).attr("style")
            $(this).attr("style", thisStyle)
            }else{
            if(colorCount>4){
                colorCount=0
            }
            $(this).addClass(classname).css("color",colorArray[colorCount] )
            colorCount++
            }
        });
    });

Bi Jing wrote:

I like this issue and following is my draft implement, its working on IE/FF, hope it helps

Firstly, I suggest adding a class to COSTUMER column that gonna making things easier.

HTML sample code:

<TR>
        <TD>1</TD>
        <TD class="COSTUMER">dd</TD>
        <TD>cc</TD>
        <TD>ss</TD>
        <TD>ss</TD>
    </TR>
    <TR>
        <TD>2</TD>
        <TD class="COSTUMER">22</TD>
        <TD>33</TD>
        <TD>dsaf</TD>
        <TD>fdas</TD>
    </TR>
<TR>
        <TD>1</TD>
        <TD class="COSTUMER">dd</TD>
        <TD>cc</TD>
        <TD>ss</TD>
        <TD>ss</TD>
    </TR>

and following is JS code :

var color={};
var offset=0;

// Following fragment change cells color.
$("tr .COSTUMER").each(function(i){
    var value=$.trim($(this).text());
    if(isDuplicated(value)){
        this.style.backgroundColor=generateColor(value);
    }
});

// This function is used to check whether content of one rows appears more than one time.
function isDuplicated(value){
    return     $("tr .COSTUMER").filter(function (){
        return $.trim($(this).html())==value;
    }).length>1;
}

//Generate color with provided text value.
function generateColor(text){
    if(!color[text]){
        color[text] = ['#ccc','#999','#880000','#336699'][offset++];// For testing, only 4 elements in color array, you can increase it.
    }
    return color[text];
}

If you have more than 100 rows, this fragment maybe slow, but actually there should have a pagination, isnt it?

Best
Becoder.

On Tue, Oct 20, 2009 at 5:33 AM, Charlie <charlie...@gmail.com> wrote:

my starting thought would be use the name as a class, assign a color to class perhaps from an array of colors so you could have 10 colors and use them in order for first ten unique names, then repeat for next 10 unique names

use a length ( or size) test to see if that class already exists, if it does, get the css from the first element with that class [grab the attr("style") ], don't use a new color and go to next name

this is really rough and untested:

var colorArray=["red","blue"    etc ///setup color array, assuming 10 colors for code below]
var colorCount;
$("#yourTable tr").each(function() {

    var classname= $(this).find("td").eq(1).text();
    if ($("."+classname).length >0) {
    var thisStyle=$("."+classname +).eq(0).attr("style")
    $(this).attr("style", thisStyle)
    }else{
    colorCount++
    if(colorCount>9){
        colorCount=0
    }
    $(this).addClass("classname").css("color", colorArray[colorCount])
    }
});



Gewton Jhames wrote:
Anybody want to discuss a way to change row colors of table based on content, for example:
+-----|-----------------------+
|acess|    COSTUMER       |
|-----------------------------|
| 1   |   joseph        |
| 2 |   mary            |
| 3 |   john              |
| 4 |   joseph         |
| 5 |   joseph          |
| 6 | guile               |
| 7 |   mary               |
| 8 |   craig              |
+-----------------------------+

in this table, the name Joseph and Mary are repeated, so, every "joseph" or "mary" row must have the same color (picked randomly or not). so as every "craig", "guile" or "john" row.
I don't want to use css class names based on the name of the "costumers" because I don't know how many costumers are and how many times they appear or repeat.

thanks

[jQuery] Re: Change row colors of table based on content

Reply via email to