jQuery addClass无法正常工作

我正在尝试使用addClass在我的Joomla模板上为我提供斑马条纹表。 我使用以下代码:

 jQuery(function($) { $("tr:odd").addClass("odd"); });  

我已经能够使用tr:odd选择器动态地将css添加到表行,但是当我使用addClass函数时它只是不行(我检查了生成的源代码,并且没有表行具有“奇数”类) 。

不知道我可能做错了什么,会感激任何帮助。

因此,您知道,在查看源代码时,不会反映使用Javascript对DOM的更改。

如果您的CSS看起来像这样,该代码应该有效…

 tr.odd td { background:#070; } 

这里有两种创建斑马条纹的方法/方法,一种是使用jQuery,另一种是使用CSS3。

第一种方法 – 使用jQuery

HTML

要创建“条带化”表,我们需要创建一个带有id的表来标识它,并将样式仅应用于该表,在本例中我们将其命名为“ zebra_triped

 
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

CSS

我们为偶数行创建样式,为奇数行创建另一个样式。

  

jQuery的

最后,我们需要创建将CSS类添加到tr标签的jQuery代码,这可以通过以下代码实现:

  

第一行选择id为zebra_triped的元素中的奇数tr标签,并将它们添加为“oddRow”类,最后一行与偶数行相同,将它们添加为“evenRow”类。

第二种方法 – 使用CSS

** 我的最爱 :)*

HTML

 

Comments

By: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit,.

By: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

By: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

By: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

By: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

CSS

  

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

希望这可以帮助,

艾哈迈德

jQuery不会改变HTML文档的源代码,它会改变DOM结构(文档的内存表示)。 要查看这些更改,您必须使用显示文档DOM的浏览器插件(适用于Firefox的Firebug,适用于IE的开发人员工具(F12))。

尝试将类添加到td如下所示:

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