编程 Javascript

jquery实现奇偶行赋值不同css值

Posted in Javascript onFebruary 17, 2012

效果如下：

jquery实现奇偶行赋值不同css值
使用jquery我们可以轻松的实现上面效果，代码如下：

<html> 
<head> 
<title>jquery奇偶行css效果</title> 
<script src="http://img.3water.com/jslib/jquery/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
/*table中偶数行*/ 
.tabEven 
{ 
background: #9d8e8b; 
} 
/*table中奇数行*/ 
.tabOdd 
{ 
background: #ffffff; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#datalist tr:even").addClass("tabEven"); 
$("#datalist tr:odd").addClass("tabOdd"); 
}); 
</script> 
</head> 
<body> 
<table id="datalist"> 
<tr><td>第1行</td></tr> 
<tr><td>第2行</td></tr> 
<tr><td>第3行</td></tr> 
<tr><td>第4行</td></tr> 
<tr><td>第5行</td></tr> 
</table> 
</body> 
</html>

jquery实现奇偶行赋值不同css值

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery的clone方法应用于textarea和select的bug修复

Jun 26 Javascript

JavaScript中的toDateString()方法使用详解

Jun 12 Javascript

举例说明如何为JavaScript的方法参数设置默认值

Nov 17 Javascript

JavaScript的MVVM库Vue.js入门学习笔记

May 03 Javascript

js获取隐藏元素宽高的实现方法

May 19 Javascript

详解Javascript中DOM的范围

Feb 13 Javascript

php 修改密码实现代码

May 24 Javascript

BootStrap Table 后台数据绑定、特殊列处理、排序功能

May 27 Javascript

js实现页面多个日期时间倒计时效果

Jun 20 Javascript

关于JS模块化的知识点分享

Oct 16 Javascript

Vue-cli3多页面配置详解

Mar 22 Javascript

vue-cli3 引入 font-awesome的操作

Aug 11 Javascript

qTip2 精致的基于jQuery提示信息插件

Feb 17 #Javascript

javascript suggest效果自动完成实现代码分享

Feb 17 #Javascript

同一页面多个商品倒计时JS 基于面向对象的javascript

Feb 16 #Javascript

Js从头学起（基本数据类型和引用类型的参数传递详细分析）

Feb 16 #Javascript

通过JS获取用户本地图片路径并显示的代码

Feb 16 #Javascript

javascript简易缓动插件(源码打包)

Feb 16 #Javascript

基于jquery的textarea发布框限制文字字数输入(添加中文识别)

Feb 16 #Javascript