ezj v2.0 应用示例-表格间隔色

作者:vkvi 来源:ITPOW(原创) 日期:2010-6-6

HTML 代码

<table id="table1">
  <thead>
    <tr><th>属性</th><th>描述</th><th>CSS</th></tr>
  </thead>
  <tr><td>outline</td><td>在一个声明中设置所有的轮廓属性。</td><td>2</td></tr>
  <tr><td>outline-color</td><td>设置轮廓的颜色。</td><td>2</td></tr>
  <tr><td>outline-style</td><td>设置轮廓的样式。</td><td>2</td></tr>
  <tr><td>outline-width</td><td>设置轮廓的宽度。</td><td>2</td></tr>
</table>

以上表格有一个表头,希望表的项目有间隔色,这样项目多的时候,看起来比较顺眼。

ezj 实现方式

ezj.css.addText(".c0{background-color:#EFC}.c1{background-color:#EEE}");
$("table1 <tbody <tr").element.each(function(i, e){
    $(e).addClass("c" + i % 2);
});

首先用 ezj.css.addText 设置两个样式表,对应的 class 分别为 c0、c1。

然后用 $ 选择 id 为 table1 下面的 tbody 标签下面的 tr 标签。分次执行其每个 element(这里不是 elements),也就是每个 tr。为每个 tr 添加 class。

有人会说:“HTML 代码中没有 tbody 啊?”,不必担心,HTML table 中,tbody 是可以省略的,这在各个浏览器中均是兼容的。

ezj 官方网站

http://www.itpow.com/products/ezj/


相关文章