table行随鼠标移动变色示例

时间：2022-02-28 09:20:32|栏目：jquery|点击：次

1、设计表格

 
<body class="html_body"> 
 
<div class="body_div"> 
 
<table id="tab"> 
 
<tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> 
 
<th>工号</th> 
 
<th>姓名</th> 
 
<th>年龄</th> 
 
<th>性别</th> 
 
</tr> 
 
<tr> 
 
<td>2014010101</td> 
 
<td>张峰</td> 
 
<td>56</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010102</td> 
 
<td>李玉</td> 
 
<td>42</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010103</td> 
 
<td>王珂</td> 
 
<td>36</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010104</td> 
 
<td>张钰</td> 
 
<td>31</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010105</td> 
 
<td>朱顾</td> 
 
<td>44</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010106</td> 
 
<td>胡雨</td> 
 
<td>35</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010107</td> 
 
<td>刘希</td> 
 
<td>30</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010108</td> 
 
<td>孙宇</td> 
 
<td>45</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010109</td> 
 
<td>谷雨</td> 
 
<td>33</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010110</td> 
 
<td>科宇</td> 
 
<td>45</td> 
 
<td>女</td> 
 
</tr> 
 
</table> 
 
</div> 
 
</body>

2、设计样式

复制代码代码如下:

 
.html_body .body_div{ 
 
width: 1340; 
 
height: 595; 
 
} 
 
.body_div{ 
 
font-size: 12px; 
 
background-color: #CCCCCC; 
 
} 
 
.tr_odd{ 
 
background-color: orange; 
 
} 
 
.tr_even{ 
 
background-color: aqua; 
 
} 
 
.mouse_color{ 
 
background-color: green; 
 
} 
 
#tab{ 
 
border: 1px #FF0000 solid; 
 
text-align: center; 
 
width: 100%; 
 
height: 100%; 
 
}

3、设计JS

复制代码代码如下:

 
//设置奇数行背景色 
 
$("#tab tr:odd").find("td").addClass("tr_odd"); 
 
//设置偶数行背景色 
 
$("#tab tr:even").find("td").addClass("tr_even"); 
 
/** 
 
* 鼠标移到的颜色 
 
*/ 
 
$("#tab tr").mouseover(function(){ 
 
$(this).find("td").addClass("mouse_color"); 
 
}); 
 
/** 
 
* 鼠标移出的颜色 
 
*/ 
 
$("#tab tr").mouseout(function(){ 
 
$(this).find("td").removeClass("mouse_color"); 
 
});

4、设计结果

（1）初始化

（2）单击奇数行

（3）单击偶数行

5、附录

复制代码代码如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<title>table随鼠标变色</title> 
 
<meta http-equiv="pragma" content="no-cache"> 
 
<meta http-equiv="cache-control" content="no-cache"> 
 
<meta http-equiv="expires" content="0"> 
 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 
<meta http-equiv="description" content="This is my page"> 
 
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> 
 
<style type="text/css"> 
 
.html_body .body_div{ 
 
width: 1340; 
 
height: 595; 
 
} 
 
.body_div{ 
 
font-size: 12px; 
 
background-color: #CCCCCC; 
 
} 
 
.tr_odd{ 
 
background-color: orange; 
 
} 
 
.tr_even{ 
 
background-color: aqua; 
 
} 
 
.mouse_color{ 
 
background-color: green; 
 
} 
 
#tab{ 
 
border: 1px #FF0000 solid; 
 
text-align: center; 
 
width: 100%; 
 
height: 100%; 
 
} 
 
</style> 
 
<script type="text/javascript"> 
 
$(function(){ 
 
//设置奇数行背景色 
 
$("#tab tr:odd").find("td").addClass("tr_odd"); 
 
//设置偶数行背景色 
 
$("#tab tr:even").find("td").addClass("tr_even"); 
 
/** 
 
* 鼠标移到的颜色 
 
*/ 
 
$("#tab tr").mouseover(function(){ 
 
$(this).find("td").addClass("mouse_color"); 
 
}); 
 
/** 
 
* 鼠标移出的颜色 
 
*/ 
 
$("#tab tr").mouseout(function(){ 
 
$(this).find("td").removeClass("mouse_color"); 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body class="html_body"> 
 
<div class="body_div"> 
 
<table id="tab"> 
 
<tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> 
 
<th>工号</th> 
 
<th>姓名</th> 
 
<th>年龄</th> 
 
<th>性别</th> 
 
</tr> 
 
<tr> 
 
<td>2014010101</td> 
 
<td>张峰</td> 
 
<td>56</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010102</td> 
 
<td>李玉</td> 
 
<td>42</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010103</td> 
 
<td>王珂</td> 
 
<td>36</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010104</td> 
 
<td>张钰</td> 
 
<td>31</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010105</td> 
 
<td>朱顾</td> 
 
<td>44</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010106</td> 
 
<td>胡雨</td> 
 
<td>35</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010107</td> 
 
<td>刘希</td> 
 
<td>30</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010108</td> 
 
<td>孙宇</td> 
 
<td>45</td> 
 
<td>女</td> 
 
</tr> 
 
<tr> 
 
<td>2014010109</td> 
 
<td>谷雨</td> 
 
<td>33</td> 
 
<td>男</td> 
 
</tr> 
 
<tr> 
 
<td>2014010110</td> 
 
<td>科宇</td> 
 
<td>45</td> 
 
<td>女</td> 
 
</tr> 
 
</table> 
 
</div> 
 
</body> 
 
</html>

上一篇：jQuery Validate格式验证功能实例代码（包括重名验证）

栏目：jquery

下一篇：基于jquery自己写tab滑动门(通用版)

本文标题：table行随鼠标移动变色示例

本文地址：http://www.codeinn.net/misctech/194780.html

更多jquery

jquery

table行随鼠标移动变色示例

阅读排行

推荐教程