下面小编就为大家带来一篇使用jQuery5分钟快速搞定双色表格的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
先看看这个使用jQuery做的双色表格的效果：
这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。
第一步：写好css。
th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
第二步：写jQuery页面加载事件：
上面的鼠标悬浮事件采用了jQuery的链式操作，本来是应该这么写的：
$(".stripe tr").mouseover(function(){ $(this).addClass("over");}) $(".stripe tr").mouseout(function(){ $(this).removeClass("over"); })
但上面的的代码却写成了这样：
$(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");})
在jQuery中，执行完mouseover或mouseout等方法之后，它会返回当前的操作对象，所以可以采用jQuery的链式操作。
下面把完整的jsp代码贴出来MyJsp.jsp：
<base href="">jQuery用几分钟时间搞定双色表格 th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
| 姓名 | 年龄 | ||
|---|---|---|---|
| 李晓红 | 24 | 859855*** | 859855***@qq.com |
| 云天河 | 18 | 123456789 | 123456789@qq.com |
| 柳梦璃 | 18 | 987654321 | 987654321@qq.com |
| 韩菱纱 | 18 | 888888888 | 888888888@qq.com |
| 玄霄 | 58 | 123456 | 123456@qq.com |
| 土灵珠 | 1000 | -10000 | -10000@qq.com |
怎么样?jQuery就是这么牛x.
以上这篇使用jQuery5分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是使用jQuery5分钟快速搞定双色表格的简单实例的详细内容，更多请关注本站其它相关文章！
