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

[Bi Jing]

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