How can I create an automatically generated alteranate table row color ?

Question

Good day,

I've been trying to make this CSS code work:

table.mytable {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.8em;
    border-collapse: collapse;
}
table.mytable td, table.mytable th { 
    width: auto;
    padding: 2px 4px;
    vertical-align: top;
}
table.mytable th {
    color: #fff;
    background:url(images/header-bg.gif);
    text-align: left;
}
table.mytable tr.alternateColor {
    background-color:#E9F3FC;
}

well, it works, if I do write it manually. But as the tables are going to be generated thru asp.NET (Aspx) , which is not manually created- I'd like my table to generate the alternate rows. I've been trying to make this work with Javascript, but I can't figure it out and I believe this is a good resource site.

I've been using a manual table with Adobe Dreamweaver cs4 as a test, but I have to put the class of "alternatecolors" in order to make them appear, and I can't do this normally.:

Question is , can someone provide me a good Javascript that I would put in the header of the file, and actually help me out to make this work ? I think I'm burned...or maybe I can't see what others see quickly due to the amount of time I've spent.

I just tried posting the code of my table here, but I couldn't get it well formatted and I got to run...

I'm not using an 'id' on this table, but the class is 'mytable'.

Thank you so much for your good help. UPDATE: How to solve this question On the CSS file that defines the Tables, I had to add these two lines (of course there's more lines to define a good table) ..but these two are important

table.alternate td.odd { background-color:#fff}
table.alternate td.even { background-color:#e6e6e6; }

and after that, I added these lines to the html, just before drawing a table. This is a Jquery thing that activates the odd and even properties of the tables

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;
<script>
$(document).ready(function()
{
  $("table.alternate tr:even td").addClass("even");
  $("table.alternate tr:odd td").addClass("odd");
});
</script>

If you guys find it helpful, please try it and if it doesn't work, it might be something else out of my knowledge. But this worked out fine in my case.

Regards.

Answer 1

Using jQuery:

$('.mytable tr:odd').addClass('alternateColor');

Answer 2

I will prefix this by saying that you can make ASP.NET's table control handle alternating colors for you, and that is how you should do it! Do not use JavaScript for this unless you're building the table client-side in JavaScript.

See this link for info on setting up alternating rows with ASP.NET's table control: http://authors.aspalliance.com/aspxtreme/aspnet/syntax/htmltablecontrol.aspx

That said, this becomes extremely trivial if you can include jQuery in your project:

// Fires when the DOM is ready for us to interact with
$(document).ready(function() {
    // Apply class "alternateColor" to every other <tr> element in the table
    $('table.mytable tr:odd').addClass('alternateColor');
}

The equivalent code in vanilla JavsScript is somewhat of a nightmare because of JavaScript's inability to select elements by class.

var table, tbody, rows, arr, i

// Get all our tables, and find the one with our class selector
arr = getElementsByTagName('table');
for (i = 0; i < arr.length; ++i) {
    if (arr[i].className == 'mytable') {
        // we've found the table;
        table = arr[i];
        break;
    }
}

// get the table's rows, by way of the table's body element
tbody = table.getElementsByTagName("tbody")[0];
rows  = tbody.getElementsByTagName("tr");

// apply our class to every other row in the table
for (i = 0; i < rows.length; i += 2) {
    rows[i].className += ' alternateColor';
}

Answer 3

Use AlternatingItemTemplate. No need to tweak it on the client using jQuery.

Answer 4

I'm not comfortable giving a pure javascript solution, because I'm pretty sure I'd mess it up, and everyone has their own favorite framework. Instead, here is the basic logic behind it:

1. Wait for the DomReady event
2. Find all the elements that are tables, and have the class alternatecolors.
3. Find all the even rows in those tables
4. Loop through the rows, and add the class alternatecolor to them.

Answer 5

You can do this with just CSS3. It won't work in IE, but it'll work in FF 3.5+, Safari 3.1+, Opera 9.5+, and Chrome 2.0+.

table.mytable tr:nth-of-type(even)
{
    background-color:#E9F3FC;
}