table行隨鼠標移動變色示例

2024-05-06 16:05:18

字體：大中小

來源：轉載

供稿：網友

當鼠標移到table行時會隨著改變顏色，在視覺上有一定的辨別效果，下面有個不錯的示例，大家不妨參考下

1、設計表格

復制代碼代碼如下:

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>
<div>
<table>
<tr>
<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>