Programming Tools
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingProgramming Tools

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old August 8th, 2002, 01:59 PM
w0lverine w0lverine is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Paris, France
Posts: 32 w0lverine User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to w0lverine
Exclamation Alternate row colors in javascript ?

Hi, I was thinking of something 2 minutes ago, and I wondered if somebodsy had already done this :
I would need a solution only in javascript or DHTML (I mean by that a client side solution) to alternate a table's rows, simply by changing the table's class for instance, or another way
And if it could change the row's color on a OnMouseOver event that would be great
If someone has already heard of this, or has the source code availiable, please tell me, it would be of a great help
__________________
who needs to know who i am ?

Last edited by w0lverine : August 8th, 2002 at 02:02 PM.

Reply With Quote
  #2  
Old August 8th, 2002, 02:47 PM
fakker fakker is offline
The calm b4 the storm
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2002
Location: Manchester, UK
Posts: 404 fakker User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via Yahoo to fakker
hey,

I'm not sure about the alternative coloured rows in Javascript, or DHTML... I always write it in to my ASP or PHP code... so can't help you there.....

however, I can help you with the mouse over code... to change the colour of the row...

use:

<td style="cursor:hand" onmouseover="this.style.backgroundColor='#B9C1E9'";
onmouseout="this.style.backgroundColor='#E6E6FF'";>

if you want the User to be able to click anywhere in the row and it to open a page, add

onClick="location.href='index.asp'"



Hope this helps!!
__________________
Matt 'Fakker' Facer

mattfacer.com

Reply With Quote
  #3  
Old August 8th, 2002, 03:27 PM
w0lverine w0lverine is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Paris, France
Posts: 32 w0lverine User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to w0lverine
don't worry I do it in php too, but i was interested in doing it in javascript for some reasons : it would be a simple way to do it for any table from any data from any length, i think it's doable but I'm not very good at javascript unfortunately,
something like in dunno :
where class="alttable"
for(i=0;i<nbrows;i++)
{
changing color stuff
}

see it's not JS but just for the purpose of seeing the algorithm

Reply With Quote
  #4  
Old August 8th, 2002, 03:41 PM
fakker fakker is offline
The calm b4 the storm
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2002
Location: Manchester, UK
Posts: 404 fakker User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via Yahoo to fakker
If I am getting data from my DB and outputting it to the page, I use session variables to hold each colour ... if I wanted to change the colour of rows on a static site, then I would simply use dreamweaver to do it..

why would you need to use Javascript? By the time the page is written to the browser, the rows have already been coloured from the PHP/ASP code...

I dont know of any reason to use JS to colour the rows?! .... can you give an example?

Reply With Quote
  #5  
Old August 8th, 2002, 03:54 PM
w0lverine w0lverine is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Paris, France
Posts: 32 w0lverine User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to w0lverine
OK I'll try to explain myself simplier
Say we have a static page (for the example), i have a table enumerating some datas (whatever)
say i put the class "altrows" to the table tag for instance :
<table class="altrows">

I want the JS fonction to parse the page for tables with the class=altrows, for instance with the getElementsByClassName fonction. The u get the number of rows, and for each row u alternate the background and you do the onmouseover thing.

What the point say u ? Easy my friend : first of all the simplicity : just put the classname and u get the nice alternated onmouseover'd table (lol), secondly, client parsed, lightens the server (gotta find a second proof eh ?)
VOILA so if u know a little bit more js than i do please let me know !

Reply With Quote
  #6  
Old August 8th, 2002, 03:59 PM
fakker fakker is offline
The calm b4 the storm
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2002
Location: Manchester, UK
Posts: 404 fakker User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via Yahoo to fakker
I'm stumped.



I am mearly a beginner at JS....sorry!!!
I get your point tho.... maybe someone out there can dig out their reference books out and help?!!

Sorry!!

Reply With Quote
  #7  
Old August 8th, 2002, 04:01 PM
w0lverine w0lverine is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Paris, France
Posts: 32 w0lverine User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to w0lverine
got the last word

Reply With Quote
  #8  
Old August 8th, 2002, 07:23 PM
w0lverine w0lverine is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Paris, France
Posts: 32 w0lverine User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to w0lverine
I Did it

Well i managed to put something together for my little problem, and it works, so here it is, I'm pretty sure it'll be usefull to some of you :

First of all you need to call the function when the page is loaded : it will parse the document for all the tables having the "classname" class name at apply the row alternance to them : for instance (assuming the function is already in the page source)
Code:
<body  OnLoad="javascript:altrows('classname','#555555','#222222'  )"> 


Now the functions :
At first we need to declare the function getElementsByClassName, equivalent of the getElementsByTagName which doesn't exist in Javascript, so i took the one here : (yes it's chinese and I don't understand it more than you do )
Code:
function getElementsByClassName(ClassName,tagName,parentEle  ment){
 var elements=new Array();
 var d=parentElement ? parentElement : document;
 var allElements;

 if(tagName)
   allElements=d.all && d.all.tags(tagName)
    || d.getElementsByTagName && d.getElementsByTagName(tagName);
 else allElements=d.all || d.getElementsByTagName("*");
 
 for(var i=0,len=allElements.length; i<len; i++)
  if(allElements[i].className==ClassName)
   elements[elements.length]=allElements[i];

 return elements;
}


At last the function in itself :
Code:
function altrows(classname,firstcolor,secondcolor) {
var tableElements = getElementsByClassName(classname) ;
var table = tableElements[tableElements.length - 1] ;

rows = table.getElementsByTagName("tr") ;
var counter = 0
for( i = 0; i <= rows.length; i=i+2) {
rows[i].bgColor = firstcolor ;
rows[i+1].bgColor = secondcolor ;
}
}


The arguments are self explanatory I think :
- classname is the name of the class of the table (of the .. )
- firstcolor : color of the even rows
- secondcolor : color of the odd rows

The code is simple, anyone can modify it, for example to choose the beginning line (if you have the labels at the first line ) by changing the i=0 in the for loop.

Hope this will be usefull, it is for me

Reply With Quote
  #9  
Old August 9th, 2002, 05:45 AM
fakker fakker is offline
The calm b4 the storm
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2002
Location: Manchester, UK
Posts: 404 fakker User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via Yahoo to fakker
<worship> I'm gonna give it a whirl now.....!! </worship>

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingProgramming Tools > Alternate row colors in javascript ?


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap