...

View Full Version : alternative bgcolors of table rows/columns



codingmasta
02-04-2007, 04:48 PM
How could we do alternative background color of table?
HELP ME PLEASE!!!

chump2877
02-04-2007, 05:00 PM
<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....

chump2877
02-04-2007, 05:13 PM
Also, for columns:


<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>

Bill Posters
02-04-2007, 05:17 PM
Modern javascript for automatically striping existing table...
...rows (http://test.newplasticarts.co.uk/_tests/javascript%2Bdom/table_stripe_complete_flexible/)
...colums (http://test.newplasticarts.co.uk/_tests/javascript%2Bdom/table_stripe_complete_alt/)

chump2877
02-04-2007, 05:25 PM
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...

FJbrian
02-04-2007, 07:11 PM
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?

FJbrian
02-04-2007, 07:13 PM
could probably use the subscribe feature and just strip out all the email stuff as a good starting point to create it.

Bill Posters
02-04-2007, 09:26 PM
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.

zk0
02-22-2007, 12:15 PM
Hey, I need help with this. This is how my code looks like:

I have commented the code that I have problems with:


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum