SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternating Row Colors

    Hey

    i have been searching for a bit of javascript to alternate table row colors (from a database or not). So far i have had no luck, does anybody know if this can easily be done with the DOM?

    cheers

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No its not done by the dom, I was going to answer this before, but your best bet is using php, however I will make this in javascript for you

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah i know its pretty simple using PHP. I have never really tried it using anything other than PHP.

    Thanks for your help

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think something like this should work

    PHP Code:
    <script type="javascript">
        
        var 
    rows 10;
        
        var 
    content = new Array();
        var 
    color   = new Array();
        
        
    content[0] = 'column 1';
        
    content[1] = 'column 2';
        
    content[2] = 'column 3';
        
    content[3] = 'column 4';
        
        
    color[0]   = 'black';
        
    color[1]   = 'white';

        
    with (document)
        {
            
    write ('<table width="450" border="1">');
            for (
    a=0<= rowsa++)
            {
                if (
    num ?     write ('<tr><td width="618" height="20" valign="top" bgcolor="' color[0] + '">' content[a] + '</td></tr>');a+=1; :     write ('<tr><td width="618" height="20" valign="top" bgcolor="' color[a] + '">' content[1] + '</td></tr>');a+=1;)
            }
            
    write ('</table>');
        }
        
    </script> 

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a real easy way to do this with the DOM. It's explained here http://www.pxl8.com/alternate_rows.html

    Michele
    PXL8

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple more ways using both DHTML and DOM. Neither is a flexible as they might be but might be of use to someone.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Alernate row colours</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	<style>
    		td {
    			background-color: #ffffff;
    			font-size: 11px;
    			font-weight: bold;
    			padding: 5px;
    		}
    		
    		td.cell1 {
    			color: #cc3300;
    			background-color: #eeeeee;
    		}
    		
    		td.cell2 {
    			color: #3366cc;
    			background-color: #ffffff;
    		}
    	
    	</style> 
    	
    	<script type="text/jscript">
    	
    
    	
    	
    	function setCellsDHTML(strTableID, strClasses) {
    	
    		var objTable = document.getElementById(strTableID);
    		var objRows;
    		var objCells;
    		
    		var arrClasses = strClasses.split(",");
    		var intClassCnt = arrClasses.length;
    		var strClass;
    		
    		if (objTable != null) {
    			
    			//Get the table rows
    			objRows = objTable.rows;
    			
    			//Loop around rows
    			for (i = 0; i < objRows.length; i++) {
    				objCells = objRows[i].cells;
    				
    				//Get style class for row cell
    				strClass = arrClasses[(i % intClassCnt)]; 
    				
    				//Loop around cells
    				for (j = 0; j < objCells.length; j++) {
    					objCells[j].className = strClass;
    				}
    			}
    		
    		}	
    	
    	}
    	
    	function setCellsDOM(strTableID, strClasses) {
    	
    		var objTable = document.getElementById(strTableID);
    		var objRows;
    		var objCells;
    		
    		var arrClasses = strClasses.split(",");
    		var intClassCnt = arrClasses.length;
    		var strClass;
    		
    		if (objTable != null) {
    
    			//Get the table rows
    			objRows = objTable.getElementsByTagName("TR");
    
    			//Loop around rows
    			for (i = 0; i < objRows.length; i++) {
    				//Get style class for row cell
    				strClass = arrClasses[(i % intClassCnt)];
    	
    				//Get cells
    				objCells = objRows[i].getElementsByTagName("TD");
    				
    				//Loop around cells
    				for (j = 0; j < objCells.length; j++) {
    					///???
    					//Not sure why the attribute is named 'className'
    					//asI'd expect it to be named 'class'.
    					objCells[j].setAttribute("className", strClass);
    				}
    	
    			}
    		}	
    	
    	}
    	
    	
    	</script>
    </head>
    
    <body>
    
    <input type="button" value="Set cells with DHTML" onclick="setCellsDHTML('testtable', 'cell1,cell2')">
    
    <input type="button" value="Set cells with DOM" onclick="setCellsDOM('testtable', 'cell2,cell1')">
    
    
    <table id="testtable" style="width: 400px">
    <tr>
    	<td>Row 1 Cell 1</td>
    	<td>Row 1 Cell 2</td>
    </tr>
    <tr>
    	<td>Row 2 Cell 1</td>
    	<td>Row 2 Cell 2</td>
    </tr>
    <tr>
    	<td>Row 3 Cell 1</td>
    	<td>Row 3 Cell 2</td>
    </tr>
    <tr>
    	<td>Row 4 Cell 1</td>
    	<td>Row 4 Cell 2</td>
    </tr>
    <tr>
    	<td>Row 5 Cell 1</td>
    	<td>Row 5 Cell 2</td>
    </tr>
    <tr>
    	<td>Row 6 Cell 1</td>
    	<td>Row 6 Cell 2</td>
    </tr>
    </table>
    
    
    
    </body>
    </html>

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a reason why you would want to do this with Javascript? Especially when it's so much simpler and guaranteed to work with a Server side scripting language?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what the HOLY SH*T @ the length of that answer?!?!

    Why not do a

    Code:
    t=document.all.table_name.getElementsByTagName('TR');
    vary=0;
    for (i=0;i<t.length;i++){
        vary=!vary;
        t[i].className=(vary)?'first':'second';
        }
    As per Flawless usual this isn't tested, but i'm sure it could work.

    Hope these four lines or so proove slightly less intimidating than fourty lines.

    Hope i'm not treading on any feet.

    @ Andrew - who's bound to comment.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  9. #9
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im not sure if this would work the same but why not:
    PHP Code:
    var 0;
    if (
    == "0"bgColor "#ffffff";
    else 
    bgColor "#eeeeee;
    dowcument.write("
    <td bgcolor=" + bgColoc + ">Blah</td>");
    a = a + 1; 
    It prolly wont work, I just thought it might
    Last edited by notepad_coder; Apr 19, 2002 at 03:40.
    - the lid is off the maple syrup again!

  10. #10
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Notepad - I'm working on the assumption the table is already written.

    There's no real point in writing the table out
    afterwards, you don't get as much content control, and
    writing info into it is a fecking pain in the *** -
    since you have to put them into variables to dump back out as you write the td's.

    It's a lot easier to have the table written normally in html and then affect it's attributes.

    That way there's less load on the client also.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  11. #11
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea that makes sense, I was just going off some PHP code I was using on a page and I thought it could work in JavaScript. But hey it was worth a try . Like I said before, I'm just a dumb kid
    Last edited by notepad_coder; Apr 19, 2002 at 03:38.
    - the lid is off the maple syrup again!

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    keep it serverside

    Why use something clientside if you can do it serverside? Presumeably you can if you're accessing a DB using serverside code.

    I'd disagree with flawless's comment on writing the table first then applying attributes to it, but that's only because this SHOULD be done serverside, unless you know the platform of all your visitors.

  13. #13
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flawless is right if you have to use clientside and you don't have access to serverside, but I agree with you, it should be done serverside
    - the lid is off the maple syrup again!

  14. #14
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll go with that - however i don't think everyone has the luxuary of a server side language or the ability to use it.

    GIVEN that the work is being asked to be done Client side, it's better to write the table out first then apply attributes.
    Otherwise inserting varied text involves putting the text into a remote script file from a database, and that's awkward.

    IF the person wanted to use Server languages he would have asked about them - you would think!

    Mullie - out of interest at the top of MY screen it says this is a javascript forum... what does it say in yours?



    p.s. if you DO have a server side language available to you then why the hell don't you use it.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  15. #15
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well technically JavaScript can be serverside well kinda with ASP.


    Sorry I just had to add that in.
    Last edited by notepad_coder; Apr 19, 2002 at 04:10.
    - the lid is off the maple syrup again!

  16. #16
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - but that's really NOT the issue right now

    If you're playing a game of Rugby you don't suddenly
    hit it with a racket and claim you were playing
    tenis all along
    (not that you'd want to)

    also - ASP is the work of the ...
    .... Mullie!


    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    smartarse...

    Flawless...


    <script language="javascript" runat="server">
    var recNode, fldNode, cssClass;

    recNode = Server.CreateObject("ADODB.Record");

    recNode.Open("", "URL=http://localhost/record_example.asp");

    Response.Write("<table border=1>");
    for (i=0; i<recNode.Fields.Count; i++) {
    fldNode = recode.Fields(i);
    i%2==0? cssClass = "cssClass1" : cssClass = "cssClass2";
    Response.Write("<tr><td class=" + cssClass + ">" + fldNode.Name + "</td><td>" + fldNode.Value + "</td></tr>");
    }
    Response.Write("</table>");

    recNode.Close();
    delete recNode;
    </script>

    . o 0 ( looks like javascript to me, but then, what do I know?... :-P )

    . o 0 ( edited because i REALLY DON'T know JS :-P )
    Last edited by mulletboy2; Apr 19, 2002 at 04:22.

  18. #18
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A VERY good answer.

    Now the 1% of the web population RUNNING Asp can use
    that - while the rest of us can continue living in the real world

    *RUNS*

    Anyway - you're KINDA missing the point of his question! he didn't say ANYTHING about databases, remote connections - remote scripting, etc!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  19. #19
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would you have to use a database? I do that with PHP (the best) using a text file and an array.
    - the lid is off the maple syrup again!

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Flawless_koder
    A VERY good answer.

    Anyway - you're KINDA missing the point of his question! he didn't say ANYTHING about databases, remote connections - remote scripting, etc!

    Flawless
    Originally posted by sambone

    i have been searching for a bit of javascript to alternate table row colors (from a database or not).
    Am I missing something? Besides, I never mentioned remote scripting, and I REFUTE your "1% of the web population" statistic.. .please qualify

  21. #21
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you *were* pulling the info from storage then
    Mullie's answer's a good one.

    Databases can retrieve the information quickly.
    I'd be tempted to pre-store the entire table
    rather than writing it out as it comes in -
    so that network disruptions etc don't show.

    However we're really missing the point... he only
    wanted to use JS to alternate row color...
    NOT connect to the FBI database using SSL with an SRP 1024 bit encryption, connect to all the top director's computers and display all their bank details while simultaneously moving large sums of money across the bank wire and making the fecking tea!

    It's not rocket science - let's try and keep it simple guys!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Flawless_koder
    However we're really missing the point... he only
    wanted to use JS to alternate row color...
    NOT connect to the FBI database using SSL with an SRP 1024 bit encryption, connect to all the top director's computers and display all their bank details while simultaneously moving large sums of money across the bank wire and making the fecking tea!
    Oh... am I on the wrong thread then?

    /join J4v45crIpt_f0r_1337_h4xx0r5:1

  23. #23
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    However on a more serious note -

    I somewhat doubt that this is enough of a reason
    to connect to the database remotely.
    If you *are* going to connect to a database:
    I think you'd be better off doing the connection and pulling the info on the server rather than trying to do it once the page has been displayed clientside.
    You're asking for trouble when there really ISN'T any
    need to do so.

    Any discussion on the benefits of this should, however,
    be conducted in an appropriate Server side language forum - ie: Perl / ASP / PHP (if you can't handle anything else @ notey)


    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  24. #24
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Alternating Row Colors

    Originally posted by sambone
    i have been searching for a bit of javascript to alternate table row colors (from a database or not).
    hehe mullie is right
    - the lid is off the maple syrup again!

  25. #25
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't agree that it's a quantifiable - or in fact ANY - excuse to connect remotely!

    If ANY database connection is being made the entire thing should be moved server side. The alternating color, db connection, and anything else - should be done with a server connection. There's NO point in doing it clientside and connecting back to the server to get information that could have been put in to start with. If you're running a database you're sure to have a server side language available too!

    If no connection is being made to a database, then it could swing either way. If a server side language is available to you then it would be more reliable to use that, otherwise use JS and be careful it works on appropriate browsers.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •