jQuery addClass no funciona

Question

Estoy tratando de utilizar addClass darme tablas rayas de cebra en mi plantilla Joomla. Im usando el siguiente código:

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

He sido capaz de utilizar el tr: Selector extraña añadir CSS a filas de la tabla dinámica, pero cuando se utiliza la función de TI addClass simplemente imposible (I comprobado el código fuente producido y ninguna de las filas de la tabla tienen la clase " impar ").

Havn't una idea de lo que podría estar haciendo mal, agradecería cualquier ayuda.

Answer 1

Así que ya saben, los cambios en el DOM con JavaScript no se reflejan cuando se ve la fuente.

Ese código debería funcionar si su CSS se parece a esto ...

tr.odd td
{
    background:#070;
}

Answer 2

aquí hay dos maneras / métodos para crear rayas de cebra, una forma usando jQuery y una manera de usar CSS3.

Primera método- usando jQuery

HTML

Para crear la tabla "rayas", tenemos que crear una tabla con un id para identificar y aplicar el estilo sólo para esa tabla, en este ejemplo vamos a nombre de " 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

Creamos un estilo para las filas pares y otro para las filas impares.

<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

Por último, tenemos que crear el código jQuery que se sumará a las clases CSS para las etiquetas TR, esto se logra con este código:

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

La primera línea selecciona las etiquetas tr impares dentro de un elemento con el zebra_triped Identificación y les añade el "oddRow" clase, la última línea hace lo mismo con las líneas pares, agregarlos a la clase "evenRow".

Segundo método- el uso de CSS

** Mi favorito:) *

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; y - webkit -border-radius: 11px; Aquí estoy definiendo el / radio de esquina redonda del borde del recipiente para cada esquina. Esta es sólo una línea especifica la propiedad radio para todas las esquinas, pero puede apuntar esquina específica de la siguiente manera:

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

y

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

Espero que esta ayuda,

Ahmed

Answer 3

jQuery no cambia el código fuente del documento HTML, cambia la estructura DOM (en memoria representación del documento). Para ver estos cambios que tienen que utilizar el navegador plug-in que muestra DOM del documento (Firebug para Firefox, Herramientas Desarrolladores (F12) para IE).

Answer 4

Trate de añadir la clase a la td lugar como esto:

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

Answer 5

 $('table tr').each(function() {
    if ($(this).find('td').eq(6).text() === 'Start') {
        $(this).addClass('tooltip');
    }
 });