我正在尝试使用addClass在我的Joomla模板上创建斑马线表格。我正在使用以下代码:
<script>
jQuery(function($) {
$("tr:odd").addClass("odd");
});
</script>
我可以使用tr:odd选择器动态地向表格行添加CSS,但是当我使用addClass函数时,它就不起作用了(我检查了生成的源代码,没有任何一个表格行有类“odd”)。
我不知道我可能做错了什么,希望能得到任何帮助。
需要注意的是,使用Javascript对DOM进行更改并不会在查看源代码时反映出来。
如果您的CSS如下所示,则该代码应该可以正常工作...
tr.odd td
{
background:#070;
}
有两种方法可以创建斑马线条纹,一种是使用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;
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');
}
});