<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--
题意:
创建一个表格,实现各行换色功能:
光标在表格上移动,当前行变色;离开当前行,颜色恢复;点击按钮,鼠标左键按下,颜色改变,抬起,颜色恢复 -->
<script src="jQuery-2.1.0/jquery-2.1.0.js"></script>
<style type="text/css">
.body_div{ width:366px;
height:388px;
font-size: 16px;
background-color: #CCCCCC;
}
.tr_odd {
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
.mousedown_mouseup_color{
background-color:red;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(function(){
/*//设置奇数行背景色
$("#tab tr:odd").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").addClass("tr_even");*/
// 鼠标移到行的颜色:光标在表格上移动,当前行变色;( mousemove或mouseover )
$("#tab tr").mousemove(function(){
$(this).addClass("mouse_color");
});
// 鼠标移出行的颜色:离开当前行,颜色恢复
$("#tab tr").mouseout(function(){
$(this).removeClass("mouse_color");
});
// 鼠标按下所在列的颜色:鼠标左键按下,颜色改变
$("#tr td").mousedown(function(){
$(this).addClass("mousedown_mouseup_color");
});
// 鼠标抬起所在列的颜色:鼠标左键抬起,颜色恢复
$("#tr td").mouseup(function(){
$(this).removeClass("mousedown_mouseup_color");
});
});
</script>
</head>
<body>
<center>
<div class="body_div">
<table id="tab" border="1" cellspacing="0" cellpadding="1" align="center" >
<tr id="tr" bgcolor="#999999" style="font-weight:bolder; font-size:23px;">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr id="tr" bgcolor="#0066FF">
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr id="tr" bgcolor="#FFCC00">
<td>李四</td>
<td>21</td>
<td>女</td>
</tr>
<tr id="tr" bgcolor="#CC33FF">
<td>王五</td>
<td>22</td>
<td>男</td>
</tr>
<tr id="tr" bgcolor="#00FF99">
<td>赵六</td>
<td>23</td>
<td>女</td>
</tr>
</table>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--
题意:
创建一个表格,实现各行换色功能:
光标在表格上移动,当前行变色;离开当前行,颜色恢复;点击按钮,鼠标左键按下,颜色改变,抬起,颜色恢复 -->
<script src="jQuery-2.1.0/jquery-2.1.0.js"></script>
<style type="text/css">
.body_div{ width:366px;
height:388px;
font-size: 16px;
background-color: #CCCCCC;
}
.tr_odd {
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
.mousedown_mouseup_color{
background-color:red;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(function(){
/*//设置奇数行背景色
$("#tab tr:odd").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").addClass("tr_even");*/
// 鼠标移到行的颜色:光标在表格上移动,当前行变色;( mousemove或mouseover )
$("#tab tr").mousemove(function(){
$(this).addClass("mouse_color");
});
// 鼠标移出行的颜色:离开当前行,颜色恢复
$("#tab tr").mouseout(function(){
$(this).removeClass("mouse_color");
});
// 鼠标按下所在列的颜色:鼠标左键按下,颜色改变
$("#tr td").mousedown(function(){
$(this).addClass("mousedown_mouseup_color");
});
// 鼠标抬起所在列的颜色:鼠标左键抬起,颜色恢复
$("#tr td").mouseup(function(){
$(this).removeClass("mousedown_mouseup_color");
});
});
</script>
</head>
<body>
<center>
<div class="body_div">
<table id="tab" border="1" cellspacing="0" cellpadding="1" align="center" >
<tr id="tr" bgcolor="#999999" style="font-weight:bolder; font-size:23px;">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr id="tr" bgcolor="#0066FF">
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr id="tr" bgcolor="#FFCC00">
<td>李四</td>
<td>21</td>
<td>女</td>
</tr>
<tr id="tr" bgcolor="#CC33FF">
<td>王五</td>
<td>22</td>
<td>男</td>
</tr>
<tr id="tr" bgcolor="#00FF99">
<td>赵六</td>
<td>23</td>
<td>女</td>
</tr>
</table>
</div>
</center>
</body>
</html>