jQuery addClass не работает

Question

Я пытаюсь использовать addClass, чтобы дать мне таблицы с полосками в зебрах на моем шаблоне Joomla. Im, используя следующий код:

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

Я был в состоянии использовать Tr: нечетное селектор, чтобы добавить CSS в строках таблицы динамически, но когда я использовать addClass функцию, которую он как раз не (я проверил исходный код, полученный и ни одна из строк таблицы не имеет класс «нечетный»).

Не знаю, что я могу делать неправильно, был бы признателен за любую помощь.

Answer 1

Знаете ли вы, что изменения в DOM с Javascript не отражаются при просмотре источника.

Этот код должен работать, если ваш CSS выглядит следующим образом ...

tr.odd td 
{ 
    background:#070; 
} 

Answer 2

Попробуйте добавить класс к td вместо вроде этого:

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

Answer 3

JQuery не изменяет исходный код HTML документа, он изменяет структуру DOM (в памяти представление документа). Чтобы увидеть эти изменения, вы должны использовать подключаемый модуль браузера, который показывает DOM документа (Firebug для Firefox, Developers Tools (F12) для IE).

Answer 4

здесь два пути/методы для создания зебра полосатая, один из способов, используя JQuery и один из способов с помощью CSS3.

Сначала с помощью JQuery ме-

HTML

Для создания «полосатая» таблицы, нам нужно создать таблицу с идентификатором, чтобы определить и применить стиль только к что таблица, в этом примере мы назовем его «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

Мы создаем стиль для четных строк, а другой для нечетных строк.

<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

Наконец, нам нужно создать код JQuery, который добавит классы CSS в теги т.р., это достигается с помощью этого кода:

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

Первая строка выбирает нечетные тэг-теги внутри элемента с идентификатором zebra_triped и добавляет им класс «oddRow», последняя строка делает то же самое с четными строками, добавляя к ним класс «e venRow».

Второй с помощью CSS ме-

** Моя любимая:) *

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 -граничный радиус: 11px; и - webkit -граничный радиус: 11px; Здесь я определяю радиус/круглый угол для границы контейнера для каждого угла. Это только одна строки указать свойство радиуса для всех углов, но я могу ориентироваться на конкретный угол, как показано ниже:

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

и

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

Надежда это помогает,

Ахмед

Answer 5

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