用JQuery实现表格隔行变色和突出显示当前行
2015-09-15 21:45
986 查看
用JQuery实现表格隔行变色和突出显示当前行
上源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>表格隔行背景和突出显示当前行</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{ margin:0 auto; font-size:12px;}
.data_list td{ width:100px;}
</style>
<script type="text/javascript">
/* 当鼠标移到表格上是,当前一行背景变色 */
$(document).ready(function(){
$(".data_list tr td").mouseover(function(){
$(this).parent().find("td").css("background-color","#d5f4fe");
});
})
/* 当鼠标在表格上移动时,离开的那一行背景恢复 */
$(document).ready(function(){
$(".data_list tr td").mouseout(function(){
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
})
$(document).ready(function(){
var color="#ffeab3"
$(".data_list tr:odd td").css("background-color",color); //改变偶数行背景色
/* 把背景色保存到属性中 */
$(".data_list tr:odd").attr("bg",color);
$(".data_list tr:even").attr("bg","#fff");
})
</script>
</head>
<body>
<table class="data_list">
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
</table>
</body>
</html>
相关文章推荐
- JQuery直接调用asp.net后台WebMethod方法
- HTML5 javascript CSS3 jQuery Mobile一些好用的网站
- JavaScript学习笔记8-jQuery异步调用方式
- Jquery 写的注册判断
- jQuery实现点击按钮闪烁
- 关于jquery的eval(codes)
- Jquery输入框邮箱自动提示
- 关于jquery中的$.fn.extend $.extend() 的作用及区别
- 让zepto和jquery可以同时使用
- jquery+ajax+php简单示例
- jQuery 实现侧边浮动导航菜单效果
- jquery-选择器
- JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
- jQuery记录--操作DOM元素.
- jQuery记录--表单选择器
- jQuery记录--普通元素过滤选择器
- jQuery记录--基础选择器
- jquery 批量删除前台jsp 加js加后台 spring
- jQuery实现图片轮播特效代码分享
- jQuery 中post 、get的同步问题