jQuery addClass nie działa

Question

Próbuję użyć addClass, aby dać mi tabele w paski na moim szablonie Joomla. Im przy użyciu następującego kodu:

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

I byli w stanie korzystać z tr: selektor dziwne dodać css do wierszy tabeli dynamicznie, ale kiedy używam addClass funkcji, jaką właśnie robi (sprawdziłem kodu źródłowego produkowanego i żaden z wierszy tabeli nie ma klasy "nieparzyste").

Nie mam pojęcia, co mógłbym zrobić źle, byłbym wdzięczny za każdą pomoc.

Answer 1

Tak wiecie, zmiany w DOM z JavaScriptem nie są odzwierciedlane podczas przeglądania źródła.

Ten kod powinien działać, jeśli CSS wygląda następująco ...

tr.odd td 
{ 
    background:#070; 
} 

Answer 2

spróbuj dodać klasę do td zamiast tak:

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

Answer 3

jQuery nie zmienia kodu źródłowego dokumentu HTML, zmienia strukturę DOM (reprezentacja w pamięci dokumentu). Aby zobaczyć te zmiany, musisz użyć wtyczki przeglądarki wyświetlającej DOM dokumentu (Firebug for Firefox, Developers Tools (F12) dla IE).

Answer 4

tutaj są dwa sposoby/metody tworzenia zebra paski, w jedną stronę przy użyciu jQuery i jeden sposób, za pomocą CSS3.

Pierwszy method- jQuery

HTML

Aby utworzyć „paski” tabeli, musimy utworzyć tabelę z identyfikatorem go zidentyfikować i zastosować styl tylko do że tabela, w tym przykładzie będziemy nazwać to "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

Tworzymy styl parzystych rzędach, a drugi dla nieparzystych wierszy.

<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

Wreszcie, musimy stworzyć kod jQuery, która doda klas CSS znaczniki TR, osiąga się to z tym kodem:

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

Pierwsza linia wybiera nieparzyste znaczniki tr wewnątrz elementu o identyfikatorze zebra_triped i dodaje je do klasy "oddRow", ostatnia linia robi to samo z liniami parzystymi, dodając do nich klasę "e venRow ".

drugie method- użyciem CSS

** Mój faworyt:) *

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 -szkielet radiowy: 11px; i - webkit -kiernik-promień: 11px; Tutaj określam promień/okrągły narożnik dla granicy pojemnika dla każdego rogu. To jest tylko jedna linia określić właściwości promienia dla wszystkich kątach, ale mogę kierować konkretną ziemię jak poniżej:

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

i

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

nadzieję, że to pomaga,

Ahmed

Answer 5

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