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

Charlie Mon, 19 Oct 2009 20:08:49 -0700

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