jQuery addClass not working

Question

Hi, 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.

Answer 1

Try adding the class to the td instead like this:

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

Answer 2

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).

Answer 3

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

Answer 4

Hi There, 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

Answer 5

On pressing a button i want to add a new class to it after removing the previous class assigned to it. Like .removeClass() and then .addClass() - Here i am adding a boundary to the select box. Now the new class is being applied on select box and a change is seen but only in IE. This does not work in Mozilla, the previous class is not getting replaced. Any solutions?