jQuery addClass not working

Question

I'm trying to use addClass to give me zebra-striped tables on my Joomla template. Im using the following code:

 <script>
  jQuery(function($) {
    $("tr:odd").addClass("odd");
  });
</script>

I've been able to use the tr:odd selector to add css to table rows dynamically, but when i use the addClass function it just doesnt (I checked the source code produced and none of the table rows have the class "odd").

Havn't a clue what I could be doing wrong, would appreciate any help.

Solution 1

So you know, changes to the DOM with Javascript are not reflected when you view the source.

That code should work if your CSS looks like this...

tr.odd td
{
    background:#070;
}

Solution 2

here are two ways/methods to create zebra-striped, one way using jQuery and one way using CSS3.

First method– using jQuery

HTML

To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "zebra_triped"

<table id="zebra_triped" cellpadding="1" cellspacing="1" >
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
</table>

CSS

We create a style for the even rows and another for the odd rows.

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }  
  table { background-color: white; width: 100%; }
  .oddRow { background-color:#ffcc00; } 
  .evenRow { background-color:#cccccc; }
</style>

jQuery

Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:

<script type="text/javascript">  
   $(document).ready(function() {  
   $("#stripedTable tr:odd").addClass("oddRow");  
   $("#stripedTable tr:even").addClass("evenRow");  
});  
</script>

The first line selects the odd tr tags inside an element with the id zebra_triped and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".

Second method– using CSS

** My favorite :)*

HTML

<div id="comments">
    <h3>Comments</h3>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,.</p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
</div>

CSS

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }
  table { background-color: white; width: 100%; }
  #comments { margin-top: 21px; padding-top: 10px; border-top: 1px solid #d7d7d7; }
  #comments .comments_body { display: table; padding: 10px; }

   #comments .comments_body:nth-child(odd) {
    padding: 21px;
    background: #E3E3E3;
    border: 1px solid #d7d7d7;
   -moz-border-radius: 11px; // support FireFox which runs on Mozilla engine
   -webkit-border-radius: 11px; // support Safari and Chrome which they run on WebKit engine
   // as usual IE is behind and no support for it yet, unless you need to hack it using Java Script.
  }
</style>

-moz-border-radius: 11px; and -webkit-border-radius: 11px; Here I’m defining the radius/round corner for the container’s border for each corner. This is only one line specify the radius property for all corners, but I can target specific corner as below:

- moz -border-radius-bottomleft:11px;
- moz -border-radius-bottomright:11px;
- moz -border-radius-topleft:11px;
- moz -border-radius-topright:11px;

and

- webkit -border-radius-bottomleft:11px;
- webkit -border-radius-bottomright:11px;
- webkit -border-radius-topleft:11px;
- webkit -border-radius-topright:11px;

Hope this helps,

Ahmed

Solution 3

jQuery does not change source code of HTML document, it changes DOM structure (in-memory representation of document). To see these changes you have to use browser plug-in that shows DOM of document (Firebug for Firefox, Developers Tools (F12) for IE).

Solution 4

Try adding the class to the td instead like this:

$("tr:odd td").addClass("odd");

View more solutions