1. Design Form
Copy Code code as follows:
<body class= "Html_body" >
<div class= "Body_div" >
<table id= "tab" >
<tr style= "background: #000000; color: #FFFFFF; font-weight:bolder;" >
<th> Work No. </th>
<th> name </th>
<th> Age </th>
<th> Sex </th>
</tr>
<tr>
<td>2014010101</td>
<td> Zhangfeng </td>
<td>56</td>
<td> male </td>
</tr>
<tr>
<td>2014010102</td>
<td> Li </td>
<td>42</td>
<td> Women </td>
</tr>
<tr>
<td>2014010103</td>
<td> Wang Ke </td>
<td>36</td>
<td> male </td>
</tr>
<tr>
<td>2014010104</td>
<td> Zhang Yu </td>
<td>31</td>
<td> Women </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> Women </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> Women </td>
</tr>
<tr>
<td>2014010109</td>
<td> Rain </td>
<td>33</td>
<td> male </td>
</tr>
<tr>
<td>2014010110</td>
<td> Keyu </td>
<td>45</td>
<td> Women </td>
</tr>
</table>
</div>
</body>
2. Design Style
Copy Code code as follows:
. 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
Copy Code code as follows:
Set odd row background color
$ ("#tab tr:odd"). Find ("TD"). AddClass ("tr_odd");
Set the even row background color
$ ("#tab Tr:even"). Find ("TD"). AddClass ("Tr_even");
/**
* Mouse to move to the color
*/
$ ("#tab tr"). MouseOver (function () {
$ (this). FIND ("TD"). AddClass ("Mouse_color");
});
/**
* Mouse move out of the color
*/
$ ("#tab tr"). Mouseout (function () {
$ (this). FIND ("TD"). Removeclass ("Mouse_color");
});
4. Design result
(1) initialization
(2) Click Odd Rows
(3) Click Even row
5. Appendix
Copy Code code as follows:
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>table with mouse color </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 are 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 odd row background color
$ ("#tab tr:odd"). Find ("TD"). AddClass ("tr_odd");
Set the even row background color
$ ("#tab Tr:even"). Find ("TD"). AddClass ("Tr_even");
/**
* Mouse to move to the color
*/
$ ("#tab tr"). MouseOver (function () {
$ (this). FIND ("TD"). AddClass ("Mouse_color");
});
/**
* Mouse move out of the color
*/
$ ("#tab tr"). Mouseout (function () {
$ (this). FIND ("TD"). Removeclass ("Mouse_color");
});
});
</script>
<body class= "Html_body" >
<div class= "Body_div" >
<table id= "tab" >
<tr style= "background: #000000; color: #FFFFFF; font-weight:bolder;" >
<th> Work No. </th>
<th> name </th>
<th> Age </th>
<th> Sex </th>
</tr>
<tr>
<td>2014010101</td>
<td> Zhangfeng </td>
<td>56</td>
<td> male </td>
</tr>
<tr>
<td>2014010102</td>
<td> Li </td>
<td>42</td>
<td> Women </td>
</tr>
<tr>
<td>2014010103</td>
<td> Wang Ke </td>
<td>36</td>
<td> male </td>
</tr>
<tr>
<td>2014010104</td>
<td> Zhang Yu </td>
<td>31</td>
<td> Women </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> Women </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> Women </td>
</tr>
<tr>
<td>2014010109</td>
<td> Rain </td>
<td>33</td>
<td> male </td>
</tr>
<tr>
<td>2014010110</td>
<td> Keyu </td>
<td>45</td>
<td> Women </td>
</tr>
</table>
</div>
</body>
