Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Use JQuery in DNN for applying alternate row color to tableUse JQuery in DNN for applying alternate row color to table
Previous
 
Next
New Post
6/30/2010 1:48 AM
 
I am using a table in an HTML module and want to apply different color to alternate rows. Currently I am achieving this using classes in CSS and applying class attribute to each row but eventually the rows will be added dynamically. I used CSS3 attribute tr:nth-child but it is not compatible in IE. Can alternate row color in table be achieved using JQuery and how do I write JQuery code in DNN?
 
New Post
6/30/2010 2:34 AM
 
Here's jQuery documentation doing exactly what you are asking
http://api.jquery.com/odd-selector/ [There's also the even selector]
:)

To add javascript when using a HTML module, you can add it to the Header (or Footer) of the HTML module in the Settings. You will need to include the script tags. (Disclaimer : I'm just typing, not testing)
When doing it dynamically [I'm assuming a module] you can add the script in the ascx, or register the script at runtime.

Hopefully that gets you on the right path for it.
 
New Post
6/30/2010 3:28 AM
 
Thanks for the response.

The scripting works but there is some very weird behavior. When i use "even" selector to color even rows the entire module gets one color. And the odd selector is ignored. Here is my code:

<script>$("tr:even").css("background-color", "#FF0000");
$("tr.odd").css("background-color", "#FFF000"); </script>


 
New Post
6/30/2010 4:39 AM
 
Hi here is the code

$("tr:nth-child(odd)").addClass("odd");

now just add the odd class to your css file

just remember hat this zebra colors all the tables in your portal you might want to only do this to certain tables so just give the table a class like table class="zebra" and then modif your code accordingly

$("table.zebra tr:nth-child(odd)").addClass("odd");
 
New Post
6/30/2010 4:43 AM
 
the reson your odd gets ignored is that your code is wrong

you have tr.odd instead of tr:odd

so in your case its not looking for odd elements but tr elements that have the class "odd"
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Use JQuery in DNN for applying alternate row color to tableUse JQuery in DNN for applying alternate row color to table


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out