Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts

    alternative bgcolors of table rows/columns

    How could we do alternative background color of table?
    HELP ME PLEASE!!!
    Last edited by codingmasta; 02-04-2007 at 04:58 PM.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Code:
    <table>
    
    <script type="text/javascript">
    
    var numRows = 10;
    for (i=2; i<=numRows + 1; i++)
    {
        if (i % 2 == 0)
            document.write('<tr bgcolor="#eeeeee"><td>This is a cell</td><td>This is a cell</td><td>This is a cell</td></tr>');
        else
            document.write('<tr bgcolor="#aaaaaa"><td>This is a cell</td><td>This is a cell</td><td>This is a cell</td></tr>');
    }
    
    </script>
    
    </table>
    I would probably do this with mostly server side code though, to include dynamic (*database) data as well in your table....
    Last edited by chump2877; 02-04-2007 at 05:02 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Also, for columns:

    Code:
    <table>
    
    <script type="text/javascript">
    
    var numRows = 10;
    var numCols = 3;
    for (i=2; i<=numRows + 1; i++)
    {
        document.write('<tr>');
    
        for (j=2; j<=numCols + 1; j++)
        {
            if (j % 2 == 0)
                document.write('<td bgcolor="#eeeeee">This is a cell</td>');
            else
                document.write('<td bgcolor="#aaaaaa">This is a cell</td>');
        }
    
        document.write('</tr>');
    }
    
    </script>
    
    </table>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Modern javascript for automatically striping existing table...
    ...rows
    ...colums

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Keep in mind if you use javascript for this, and JS is disabled, your table will not be displayed....Never depend primarily on JS to deliver your basic content...

    So use Bill Poster's Js instead, since the content will display regardless

    but I would still use PHP (or some other server side code for this), since you can;t disable PHP...
    Last edited by chump2877; 02-04-2007 at 05:30 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I always mean to do this, thank you!
    AND I always wish to write the webmaster here asking for a feature.
    It'd be so sweet if there was a set of favorite threads we could have one click access to. For example, I'd click this "add to favorites" and then a month later or so when I'm going to use this and need this page for reference I'd click on that link and come right back.
    Anyway to do that?

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    could probably use the subscribe feature and just strip out all the email stuff as a good starting point to create it.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by chump2877 View Post
    but I would still use PHP (or some other server side code for this), since you can;t disable PHP...
    Just to be clear, I agree.
    If the table is built dynamically and you have access to the server-side script, I too consider it preferable to implement/add a class value for every second row/cell(column) server-side, rather than client-side.


    I really only posted my scripts as a simple, plug 'n' play option for those who simply wish to stripe the tables in an existing site.

  • #9
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, I need help with this. This is how my code looks like:

    I have commented the code that I have problems with:

    Code:
     <script>
    
    cell = new Array (4); // Fyra rows
    for (i = 0; i < cell . length; ++ i)
    	cell [i] = new Array (3); // Tre columns
    
    		cell[0][0] = "Title 1";
    		cell[0][1] = "Title 2";
    		cell[0][2] = "Title 3";
    		cell[1][0] = "Name";
    		cell[1][1] = "ID";
    		cell[1][2] = "Number";
    		cell[2][0] = "Name";
    		cell[2][1] = "ID";
    		cell[2][2] = "Number";
    		cell[3][0] = "Name";
    		cell[3][1] = "ID";
    		cell[3][2] = "Number";
    
    function generateTable (array)
    {
    	//////////////////////////////////////////////////////////////////////////////////////////
    	// creates the table ////////////////////////////////////////////////////////////////
    
    	document.write("<table width=\"250\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">");
    	var row;
    	
    	//////////////////////////////////////////////////////////////////////////////////////////
    	// this part will show the titles and the th tags ////////////////////////////////////////
    	
    	for (row = 0; row <= 0; row++)
    	{
    		document.write(" <tr>");
    		var col;
    		for (col = 0; col < array [row] . length; ++ col)
    			document.write("  <th>" + array [row] [col] + "</th>");
    		document.write(" </tr>");
    	}
    	
    	//////////////////////////////////////////////////////////////////////////////////////////
    	// This is the part I am having problems with. It's suppose to show every second as a ////
    	// darker background /////////////////////////////////////////////////////////////////////
    	
    	//for (i=2; i<=row + 1; i++)
    	for (row = 1; row < array . length; ++ row)
    {
        document.write('<tr>');
    
        for (j=2; j<=col + 1; j++)
        {
            if (j % 2 == 0)
                document.write(" <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
            else
                document.write(" <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
        }
    
        document.write('</tr>');
    }
    	
    	//////////////////////////////////////////////////////////////////////////////////////////
    	// This shows the information - will be deleted when I get the above code to work! ///////
    	
    	for (row = 1; row < array . length; ++ row)
    	{
    		document.write(" <tr>");
    		var col;
    		for (col = 0; col < array [row] . length; ++ col)
    			document.write("  <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
    		document.write(" </tr>");
    	}
    	document.write("</table>");
    	
    }
    
    generateTable (cell);
    
     </script>


  •  

    Posting Permissions

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