jQuery的addClass方法无效

Question

我正在尝试使用addClass在我的Joomla模板上创建斑马线表格。我正在使用以下代码：

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

我可以使用tr:odd选择器动态地向表格行添加CSS，但是当我使用addClass函数时，它就不起作用了（我检查了生成的源代码，没有任何一个表格行有类“odd”）。

我不知道我可能做错了什么，希望能得到任何帮助。

- Chris Armstrong

Answer 1

需要注意的是，使用Javascript对DOM进行更改并不会在查看源代码时反映出来。

如果您的CSS如下所示，则该代码应该可以正常工作...

tr.odd td
{
    background:#070;
}

- Josh Stodola

---

是的，你说得对。我本来以为 jQuery 会改变源代码，但它没有，所以我没意识到它不起作用。 - Chris Armstrong

在Firefox上安装Firebug插件。使用它，您可以监视DOM并查看源代码的动态更改。 - Soviut

Answer 2

有两种方法可以创建斑马线条纹，一种是使用jQuery，另一种是使用CSS3。

第一种方法 - 使用jQuery

HTML

为了创建“斑马线”表格，我们需要创建一个带有id的表格来识别它，并仅将样式应用于该表格，在本例中我们将其命名为“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代码来向tr标签添加CSS类，可以使用以下代码实现：

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

第一行选择了id为zebra_triped的元素内的奇数行tr标签，并给它们添加了"class = oddRow"类，最后一行同样对偶数行进行了操作，添加了"class = 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; 这里我定义了容器边框的每个角的半径/圆角。 这只是一行代码指定了所有角的半径属性，但我可以像下面这样针对特定的角进行设置：

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

希望这能帮到你，

艾哈迈德

- egyamado

Answer 3

jQuery不会改变HTML文档的源代码，它会改变DOM结构（文档的内存表示）。要查看这些更改，您需要使用浏览器插件来显示文档的DOM（Firefox的Firebug，IE的开发人员工具（F12））。

- Lloyd

Answer 4

尝试将类添加到td中，像这样：

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

- Andrew Hare

---

首先，您可以通过将类添加到行而不是单元格来“条纹化”表格。因此，在没有任何CSS的情况下，您所说的问题不能被认为是问题，很可能只是无关紧要的。 - cletus

@cletus 这里的问题是，在设置 TR 的背景颜色时，IE7 无法正常工作。因此，当你设置 TD 时，可以设置背景颜色。你的论点毫无意义。 - peregrine

Answer 5

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

- Ashish Srivastava