This week's book giveaway is in the Clojure forum.
We're giving away four copies of Clojure in Action and have Amit Rathore and Francis Avila on-line!
See this thread for details.
Win a copy of Clojure in Action this week in the Clojure forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Color Rows of a Table

 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64188
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
When is the form loading [ajax call?].

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

correct?

Eric
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64188
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64188
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 269
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator




Eric
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 269
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 269
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
I agree. Here's the link: http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic