JQuery 表格 隔行换色 和鼠标滑过的样式
2016-02-18 14:36
721 查看
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color", "#dbdbdb"); //隔行换色 /*************/ //鼠标滑过的样式 $(".Pub_TB tbody tr:odd ").attr("bg", "#e8e8e8"); $(".Pub_TB tbody tr:even").attr("bg", "#dbdbdb"); $(".Pub_TB tbody tr td").mouseover(function () { $(this).parent().find("td").css("background-color", "#bdb9b9"); }); $(".Pub_TB tbody tr td").mouseout(function () { var bgc = $(this).parent().attr("bg"); $(this).parent().find("td").css("background-color", bgc); }); /*************/ })
<table class="Pub_TB"> <tr> <th style="width:5%">序号</th> <th>项目名称</th> <th style="width:10%">送报月份</th> <th style="width:15%">送报状态</th> <th style="width:20%">提醒方式</th> <th style="width:15%">管理</th> </tr> <tbody> <tr> <td>01</td> <td>川南步行街</td> <td>2016.01.01</td> <td></td> <td><span>短信提醒</span><span>邮箱提醒</span></td> <td class="oper"><a href="">[查看]</a> <a href="">[修改]</a> <a href="">[报送]</a></td> </tr> <tr> <td>01</td> <td>川南步行街</td> <td>2016.01.01</td> <td></td> <td><span>短信提醒</span><span>邮箱提醒</span></td> <td class="oper"><a href="">[查看]</a> <a href="">[修改]</a> <a href="">[报送]</a></td> </tr> <tr> <td>01</td> <td>川南步行街</td> <td>2016.01.01</td> <td></td> <td><span>短信提醒</span><span>邮箱提醒</span></td> <td class="oper"><a href="">[查看]</a> <a href="">[修改]</a> <a href="">[报送]</a></td> </tr> </tbody> </table>
注意tbody
相关文章推荐
- 基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
- jquery ajax 传动态值(错误试调)
- jquery的autocomplete在firefox下不支持中文输入法的bug
- jquery 拓展函数集
- jQuery自学教程(一)
- jQuery图片上传前先在本地预览
- window onload || jquery $()
- js-jQuery对象与dom对象相互转换
- jQuery 添加删除同级或不同级的class
- JQuery实现的 checkbox 全选、反选。
- jQuery之防止冒泡事件
- 导入jquery
- jquery中CSS()方法和attr方法的区别
- jQuery 获取 table 行数
- jQuery为<input />标签添加“disable”和去除“disable”属性
- jQuery html表格排序插件:tablesorter
- jQuery 插入元素时绑定事件 或 已加载的html绑定事件
- 自己动手丰衣足食之 jQuery 数量加减插件
- jquery杂记
- jQuery检测滚动条到达底部