table行随鼠标变色
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>
table行随鼠标变色
时间: 2024-11-02 21:24:23