Page 1 of 1

Row color based on cell content

Posted: Thu Nov 05, 2009 1:52 pm
by dreeves
I've got a large table with each record being an invoice. It is possible for 3 invoices to have the same request number. I would like for all the invoices with the same request number to have the same background color. So,

Code: Select all

 
request_number | invoice_date | invoice_amount
       2             2009           $10         // background of this row would be green
       2             2009           $20         // background of this row would also be green
       3             2009           $60         // background of this row would be blue
       3             2009           $55         // background of this row would be blue
       3             2009           $15         // background of this row would be blue
 
This would go on listing more invoices and requests. I've never tempted javascript, so be nice when explaining it to a new guy. I'm assuming javascript would be the best way to accomplish this. This web site has got the right idea, but I couldn't figure out how to change the example code to work with my script.
http://old.nabble.com/Change-row-colors ... 27240.html

Re: Row color based on cell content

Posted: Thu Nov 05, 2009 2:54 pm
by pickle
How will you determine what colour is associated with which id? If you have no limit on what ID is, then you must also have no limit on the colours. Or, you could pick 10 colours and cycle through them.

I'd personally use jQuery for this, but I don't think it would be terribly difficult to do in straight Javascript. Here's how to do it in jQuery, assuming you're cycling through colours:

Code: Select all

var colours = ['blue','green','grey','red','pink','yellow','lime','white','purple','orange'];
 
//loop through each <tr> inside the table with the id "idOfTable"
$("#idOfTable tr").each(function(){
 
  //access the text inside the first <td>, in the current <tr>
  var request_number = $("td:first",$(this)).text();
 
  //figure out which colour to use on this row
  var colour = colours[request_number%colours.length];
 
  //assign the colour as the background colour for this row
  $(this).css('backgroundColor',colour);
});

Re: Row color based on cell content

Posted: Thu Nov 05, 2009 3:21 pm
by dreeves
I had heard of jQuery in my search. So far, I've downloaded jquery.js and placed in the directory (www) with my html and php files. With my table name being reimbursement_request, I have the following code.

Code: Select all

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
var colors = ['grey','white'];
 $("#reimbursement_request tr".each(function(){
    var request_number=$("td:first',$(this)).text();
    var color = colors[request_number%colors.length];
    $(this).css('backgroundColor',color);
    });
});
</script>
It's not working though. The above code is in a php file, but there are html and body tags around it. Is there something else I am missing?

Re: Row color based on cell content

Posted: Thu Nov 05, 2009 3:51 pm
by pickle
Are you getting any Javascript errors? Trying this in Firefox with the Firebug add-on will likely help.

Also, please use [syntax=html]or[/syntax][syntax=javascript]tags where appropriate - it adds syntax highlighting.[/syntax]