table row background changer

@peterfc2May 17.2011

My table is 4 columns with about 400 rows. ( I’ll say red and green for this eg)
I want to style the background color across each row but in fixed blocks/rows.
i.e
rows 1-5 red
rows 6-8 green
rows 9-10 red
rows 11-15 green
rows 16-30 red
etc.
I maybe will have 30 blocks of red and 30 blocks of green.
Just using two colors. The best idea, me thinks, would be to set the whole table to one color say red then insert the green areas.
Any pointers please?

Posted this in javascript but maybe it needs css or a combination of both.

I paste in the data table, but css class or ID needs to be preset to format the table.

to post a comment

CSS

6 Comments(s) _↴

@KorMay 17.2011 — #Group your rows inside TBODY elements with different classes:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 
 &lt;style type="text/css"&gt;
 table {
 border-collapse:collapse
 }
 table td{
 border:1px solid #000;
 }
 .red{
 background:#900;
 }
 .green{
 background:#063;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table width="400" border="0"&gt;
 &lt;tbody class="red"&gt;
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;tbody class="green"&gt;  <br/>
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;tbody class="red"&gt;  <br/>
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@peterfc2authorMay 17.2011 — #I paste in the data table, but css class or ID needs to be preset to format the table. [/QUOTE]

The above is fine. But when I post a new table the classes will not be there.

@KorMay 17.2011 — #The above is fine. But when I post a new table the classes will not be there.[/QUOTE]
Why not? Detail your situation.

@peterfc2authorMay 17.2011 — #<table>

<tr>

<td >1</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >2</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >1</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

<tr>

<td >1</td>

<td >2</td>

<td >22</td>

<td >r</td>

</tr>

<tr>

<td >1</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

<tr>

<td >3</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >3</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >3</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >3</td>

<td >2</td>

<td >2</td>

<td >g</td>

</tr>

<tr>

<td >3</td>

<td >2</td>

<td >2</td>

<td >r</td>

</tr>

</table>[/QUOTE]

Here's an example of test data. I have over 400 rows. Do set css for the .table or do I need javascript to find the rows to change the color, if table has set bg.

@KorMay 17.2011 — #You did not understand. Is there a pattern of changing the bg colors? Are there those tables coming from a DataBase via a server-side scripting? If not, use the CSS solution I have already posted. Do you understand HTML, CSS, JavaScript languages? In order to have a common language. Otherwise you and all of us are wasting our times.

@peterfc2authorMay 17.2011 — #Here is another solution a kind person suggested.
<!DOCTYPE html>

<html lang="en">

<head>

<title>Page Title</title>

<style type="text/css">

tr:nth-child(-n+15) { background-color: red; } /* the order of these rules is significant */

tr:nth-child(-n+13) { background-color:green; }

tr:nth-child(-n+11) { background-color: red; }

tr:nth-child(-n+8) { background-color:green; }

tr:nth-child(-n+6) { background-color:red; }

tr:first-child { background-color: transparent; }

.redR { background-color: red; }
  .greenR { background-color: green; }
  </style> 
  <script type="text/javascript">
   function colourRows(tbl) {
   var $tbl = document.getElementById(tbl);
   var x, y;
   for ( x = 0, y = $tbl.rows.length; x < y; x++ ) {
   if ( x < 5  ) {
   if ( $tbl.rows[x].cells[0].nodeName != 'TH' )
   $tbl.rows[x].className = 'redR';
   }
   else if ( x < 7 )
   $tbl.rows[x].className = 'greenR';
   else if ( x < 10 )
   $tbl.rows[x].className = 'redR';
   else if ( x < 12 )
   $tbl.rows[x].className = 'greenR';
   else if ( x < 20 )
   $tbl.rows[x].className = 'redR';
   }
   }
  </script>

</head>

<body onload="colourRows('myT');" >

<table id="myT">
   <tr><th>This is a Header</th><th>And a Second</th></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
   <tr><td>Any old text</td><td> and some more..</td></tr>
  </table>

</body>

</html>[/QUOTE]

I am waiting for a modification so that the table has a default background and i change the blocks I need to another color

Sorry if my target was not explained to you in more detail.

Also in #CSS _↴

action not working click a link in one page, open another html page with sliding effect Can I have different colored links on my page?

Success!

Help @peterfc2 spread the word by sharing this article on Twitter...

Tweet This

table row background changer

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

table row background changer

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴