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

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

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

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

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


jquery addclass
person Chris Armstrong    schedule 27.07.2009    source источник

Ответы (4)


arrow_upward
24
arrow_downward

Итак, вы знаете, что изменения в DOM с помощью Javascript не отражаются при просмотре исходного кода.

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

tr.odd td
{
    background:#070;
}
person Josh Stodola    schedule 27.07.2009
comment
да, вы правы, я предполагал, что jQuery изменит исходный код, и, поскольку он не понял, что он не работает. - person Chris Armstrong; 27.07.2009
comment
Установите Firebug на Firefox. С его помощью вы можете отслеживать DOM и видеть динамические изменения, внесенные в исходный код. - person Soviut; 27.07.2009

arrow_upward
9
arrow_downward

вот два способа/метода для создания полосы зебры, один способ с использованием 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 к тегам tr, это достигается с помощью этого кода:

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

Первая строка выбирает нечетные теги tr внутри элемента с id zebra_triped и добавляет к ним класс "oddRow", последняя строка делает то же самое с четными строками, добавляя к ним класс "evenRow".

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

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

Надеюсь это поможет,

Ахмед

person Community    schedule 27.07.2009

arrow_upward
3
arrow_downward

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

person Lloyd    schedule 27.07.2009

arrow_upward
1
arrow_downward

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

$("tr:odd td").addClass("odd");
person Andrew Hare    schedule 27.07.2009
comment
Во-первых, вы можете чередовать свою таблицу, добавляя класс в строку вместо ячейки. Так что то, что вы говорите, в отсутствие какого-либо CSS, нельзя назвать проблемой и, вероятно, просто не имеет значения. - person cletus; 27.07.2009
comment
@cletus проблема в том, что IE7 не работает, когда вы устанавливаете цвет фона TR. Поэтому, когда вы устанавливаете TD, вы можете установить цвет фона. Ваши аргументы не имеют смысла. - person peregrine; 15.07.2010