|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
August 8th, 2002, 02:59 PM
|
|||
|
|||
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 03:02 PM.
|
|
#2
August 8th, 2002, 03:47 PM
|
|||
|
|||
|
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!!
|
|
#3
August 8th, 2002, 04:27 PM
|
|||
|
|||
|
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
|
|
#4
August 8th, 2002, 04:41 PM
|
|||
|
|||
|
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?
|
|
#5
August 8th, 2002, 04:54 PM
|
|||
|
|||
|
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 !
|
|
#6
August 8th, 2002, 04:59 PM
|
|||
|
|||
|
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!! 
|
|
#8
August 8th, 2002, 08:23 PM
|
|||
|
|||
|
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
|
|
| Viewing: Dev Articles Community Forums > Programming > Programming Tools > Alternate row colors in javascript ? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
