jQuery addClass 不工作
我正在尝试使用 addClass 在 Joomla 模板上提供斑马条纹表格。 我使用以下代码:
<script>
jQuery(function($) {
$("tr:odd").addClass("odd");
});
</script>
我已经能够使用 tr:odd 选择器动态地将 css 添加到表行,但是当我使用 addClass 函数时,它却不能(我检查了生成的源代码,并且没有一个表行具有“奇数”类)。
不知道我可能做错了什么,希望得到任何帮助。
I'm trying to use addClass to give me zebra-striped tables on my Joomla template. Im using the following code:
<script>
jQuery(function($) {
$("tr:odd").addClass("odd");
});
</script>
I've been able to use the tr:odd selector to add css to table rows dynamically, but when i use the addClass function it just doesnt (I checked the source code produced and none of the table rows have the class "odd").
Havn't a clue what I could be doing wrong, would appreciate any help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
所以您知道,当您查看源代码时,使用 Javascript 对 DOM 所做的更改不会反映出来。
如果你的 CSS 看起来像这样,那么该代码应该可以工作......
So you know, changes to the DOM with Javascript are not reflected when you view the source.
That code should work if your CSS looks like this...
这里有两种创建斑马条纹的方式/方法,一种是使用 jQuery,一种是使用 CSS3。
第一种方法 - 使用 jQuery
HTML
要创建“条带”表,我们需要创建一个带有 id 的表来标识它并应用仅对该表添加样式,在本示例中,我们将其命名为“zebra_triped”
CSS
我们为偶数行创建一个样式,为偶数行创建另一个样式奇数行。
jQuery
最后,我们需要创建将 CSS 类添加到 tr 标签的 jQuery 代码,这是通过以下代码实现的:
第一行选择奇数 tr 标签在 id 为 zebra_triped 的元素内,并将它们添加到“oddRow”类,最后一行对偶数行执行相同的操作,将它们添加到“evenRow”类。
第二种方法 - 使用 CSS
** 我最喜欢的 :)*
HTML
CSS
< em>-moz-border-radius: 11px; 和 -webkit-border-radius: 11px;
在这里,我定义每个角的容器边框的半径/圆角。
这只是一行指定所有角的半径属性,但我可以按如下所示定位特定角:
希望
这会有所帮助,
艾哈迈德
here are two ways/methods to create zebra-striped, one way using jQuery and one way using CSS3.
First method– using jQuery
HTML
To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "zebra_triped"
CSS
We create a style for the even rows and another for the odd rows.
jQuery
Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:
The first line selects the odd tr tags inside an element with the id zebra_triped and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".
Second method– using CSS
** My favorite :)*
HTML
CSS
-moz-border-radius: 11px; and -webkit-border-radius: 11px;
Here I’m defining the radius/round corner for the container’s border for each corner.
This is only one line specify the radius property for all corners, but I can target specific corner as below:
and
Hope this helps,
Ahmed
jQuery 不会更改 HTML 文档的源代码,它会更改 DOM 结构(文档在内存中的表示形式)。 要查看这些更改,您必须使用显示文档 DOM 的浏览器插件(Firefox 的 Firebug、IE 的开发人员工具 (F12))。
jQuery does not change source code of HTML document, it changes DOM structure (in-memory representation of document). To see these changes you have to use browser plug-in that shows DOM of document (Firebug for Firefox, Developers Tools (F12) for IE).
尝试将类添加到
td
中,如下所示:Try adding the class to the
td
instead like this: