permaculture playing cards*
The moose likes HTML, CSS and JavaScript and the fly likes Color Rows of a Table Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Color Rows of a Table" Watch "Color Rows of a Table" New topic
Author

Color Rows of a Table

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
I need to know the proper JS to color rows of a table basd on a particular cell value of each row. Can someone please help?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

What's the first thing you need to figure out how to do? Break it down into steps and then propose code to perform each. We'll help you out plenty but aren't going to write the code for you.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
I have got the coloring rows to work now but when do I call the function that does this. If I call it in the onload the table is not built yet. So is there a way to fire it after the form loads?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
When is the form loading [ajax call?].

You are talking about window.onload = function(){alert("hi");}

correct?

Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
I have on my HTML page

the body tag calls myLoadFunction()


If I call the colorTable() function from the myLoadFunction I get a failure because the table has not been built yet(it is built farther down in the code).

Also I have the row colored to red, how do I get the text to white?
[ December 07, 2007: Message edited by: Steve Dyke ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Well of course you can;t modify the table until it exists. You'll need to re-jigger the code to do thing in the correct order. With regards to white text, CSS, like anything else.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
I am still needing help on how to fire A JS function to add color to rows when a page is displayed. The table is dynamicly populated by an array of arrays. The color is depaendant on a particular cell value. I have a button that will fire the function but really need it to be called progamatically.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The table is dynamicly populated by an array of arrays really tells us nothing.

When is the data added? On the server or on the client? Is this an Ajax call?

If the table is generated on the client, why are you not setting the ow color when the table is being built? Seems a little funny you do it after post processing.


Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Steve Dyke:
The table is dynamicly populated by an array of arrays.

How? Without details, we're just guessing. In a JSP? In JavaScript? If so, where and how?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
The table is loaded from server side data. The JSP has record header data in one table and the table in question contains item data. When a user first opens the page there are no items because this is a new record. They click a button to add an item. An input page appears, they type in the data one field of which is a status flag(Accepted or Rejected), click done, the input page closes, reloads the calling page which goes out and looks for items again and the new item added appears. Now is when I need the line item to be red if is was a status of rejected.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
How are you loading the table data? Are you using JSTL? Are you using a scriptlet? We need to know more so that we would know how to approach this. There are different ways to do what you want. I am doing this in my jsp using a JSTL. It checks the value of a certain field and then I have classes in my CSS based on that. But I'm loading using <c:forEach> from a list of beans.

Just throw us a bone
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
I am loading my table the same way. However, I am not that familiar with CSS. I have been using JS and DOM to color the rows.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6




Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
So how do I use this approch to read the value of a cell, if the value = "Rejected" color it red, if not leave it as default color?
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Here is what I'm doing with coloring my text in a cell. I'm sure you can take this and figure out how to apply it to the row or cell bg colors.

My example is actually a scrolling table with a fixed header that is a 1 table solution. I use an external js called zebratables. That alternates each row color.

Here is the code to make the cell text color different...



Then I have CSS like this...



If I was you I would look up a good tutorial on CSS. Its invaluable when it comes to web design.
[link]http://www.html.net/tutorials/css/[/link]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1394
None of these suggestions help me color a row based on a certain cell value. As I said in an earlier post, I have the JS working that will do what I need but it is a button that has to be manually clicked. I need a way to run the JS function at the end of the page load.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I have an external js that I put in my <head> section like this...



Then in the file I have my functions and after those I have the line...

window.0nload = function() {functionName();}
^
(that is a zero, not a O because the forum won't let me post that word)

And my tables are striped by every other line. You can adapt this concept to what you want to do I'm sure. If you want the external js which has all the DOM walking code just let me know.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Originally posted by Steve Dyke:
None of these suggestions help me color a row based on a certain cell value. As I said in an earlier post, I have the JS working that will do what I need but it is a button that has to be manually clicked. I need a way to run the JS function at the end of the page load.


We suggested before you use window.onload to call your function. I am not sure why that does not work if the table is there. If it does not work. What is the exact error message. What does YOUR code look like that you added?

If you acually showed us what you are doing, we might actually help you get this solved. It feels like we are talking through a one way mirror. You can see us and we can not see you.

The best place for this logic is to add this to the code that is building your table. There is no need to have JavaScript do this if the server is building the table.

Eric
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Color Rows of a Table
 
Similar Threads
counting rows in javascript
Change the background color of a row in a table upon mouse click
Problem displaying image as background in html table
the simplest way to make table's row in different color
how to solve this simple problem in jstl ?