views:

135

answers:

5

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.

+2  A: 

Using jQuery:

$('.mytable tr:odd').addClass('alternateColor');
SLaks
Maybe toss in 'table' in the selector? `$('table.mytable tr:odd')`?
LeguRi
A: 

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';
}
meagar
Thank you for your kind help. As I'm just designing this project using Adobe Dreamweaver, and not Visual Studio - and I don't actually know much about it, I'm working with what I know, which is xhtml, css, javascript, and I will give this templates to the .NET coder so it would integrate in visual studio and work. Kind of difficult to handle both software platforms in this project, but I think VS is the ugliest thing ever created for a designer. Now, I'll talk to the .NET about this thing, as this would reduce a lot of work time for me. Iwill come back later and see other answers. Thanks ~!
UXdesigner
The important thing is that you should generate the alternating markup wherever the table is generated. Don't push it to the client side unless you are building the table client-side.
meagar
A: 

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

Diodeus
Depending on how he's generating the table.
SLaks
A: 

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.
WishCow
A: 

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;
}
HaleFx