Example of a table row changing color as the mouse moves
- 2020-03-30 02:50:23
- OfStack
1. Design a form
2. Design style
3. Design JS
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
<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>