Example of a table row changing color as the mouse moves

  • 2020-03-30 02:50:23
  • OfStack

1. Design a form
 
<body class="html_body"> 
<div class="body_div"> 
<table id="tab"> 
<tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> 
<th> Work number </th> 
<th> The name </th> 
<th> age </th> 
<th> gender </th> 
</tr> 
<tr> 
<td>2014010101</td> 
<td> zhang </td> 
<td>56</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010102</td> 
<td> Li yu </td> 
<td>42</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010103</td> 
<td> Wang ke </td> 
<td>36</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010104</td> 
<td> ellazhang </td> 
<td>31</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010105</td> 
<td> Zhu gu </td> 
<td>44</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010106</td> 
<td> Hu Yu </td> 
<td>35</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010107</td> 
<td> Liu Xi </td> 
<td>30</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010108</td> 
<td> Sun Yu </td> 
<td>45</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010109</td> 
<td> Grain rain </td> 
<td>33</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010110</td> 
<td> Ke yu </td> 
<td>45</td> 
<td> female </td> 
</tr> 
</table> 
</div> 
</body> 

2. Design style
 
.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. Design JS
 
//Set the odd row background color
$("#tab tr:odd").find("td").addClass("tr_odd"); 
//Sets the background color for even rows
$("#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. Design results

(1) initialization
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405071006224.gif? 20144710641 ">  
(2) click the odd number of rows
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405071007205.gif? 20144710738 ">  
(3) click the even number of rows
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405071008126.gif? 20144710827 ">  
5, the appendix
 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 

<title>table Change color with the mouse </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(){ 
//Set the odd row background color
$("#tab tr:odd").find("td").addClass("tr_odd"); 
//Sets the background color for even rows
$("#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> Work number </th> 
<th> The name </th> 
<th> age </th> 
<th> gender </th> 
</tr> 
<tr> 
<td>2014010101</td> 
<td> zhang </td> 
<td>56</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010102</td> 
<td> Li yu </td> 
<td>42</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010103</td> 
<td> Wang ke </td> 
<td>36</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010104</td> 
<td> ellazhang </td> 
<td>31</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010105</td> 
<td> Zhu gu </td> 
<td>44</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010106</td> 
<td> Hu Yu </td> 
<td>35</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010107</td> 
<td> Liu Xi </td> 
<td>30</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010108</td> 
<td> Sun Yu </td> 
<td>45</td> 
<td> female </td> 
</tr> 
<tr> 
<td>2014010109</td> 
<td> Grain rain </td> 
<td>33</td> 
<td> male </td> 
</tr> 
<tr> 
<td>2014010110</td> 
<td> Ke yu </td> 
<td>45</td> 
<td> female </td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

Related articles: