DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> table行隨鼠標移動變色示例
table行隨鼠標移動變色示例
編輯：JQuery特效代碼     
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>
JQuery特效代碼
JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
js與jquery獲得頁面大小、滾動條位置、元素位置 . 代碼如下://頁面位置及窗口大小funct
jquery 最簡單易用的表單驗證插件
打包下載 代碼如下:/* Jquery 表單驗證插件 janchie 2010.1 jan
jquery自動切換tabs選項卡的具體實現
本節內容：jquery實現自動切換選項卡。代碼：. 代碼如下:<%@ page languag

相關文章

jQuery基礎知識JQuery入門技巧JQuery特效代碼JQuery常見問題
小編推薦
jQuery獲得內容和屬性方法及示例 jquery網頁元素拖拽插件效果及實現 jQuery 點擊圖片跳轉上一張或下一張功能的實現代碼 jquery改變disabled的boolean狀態的三種方法 jquery的Theme和Theme Switcher使用小結 基於jquery和svg實現超炫酷的動畫特效 jquery $.ajax相關用法分享 jQuery live jQuery autocomplate 自擴展插件、自動完成示例代碼 jQuery中.live()方法的用法深入解析
熱門推薦
快速解決jQuery與其他庫沖突的方法介紹 JQuery 獲取json數據$.getJSON方法的實例代碼 jquery 插件實現瀑布流圖片展示實例教程 JQUERY 阻止a 標簽鏈接 JQuery AJAX 中文亂碼問題解決 jQuery動態添加 input type=file的實現代碼 文本域光標操作的jQuery擴展分享 jquery多選項卡效果實例代碼之一 jquery miniui 教程 表格控件 合並單元格應用
大家都在看
HTML5 Canvas實現玫瑰曲線和心形圖案的代碼實例 JavaScript使用indexOf獲得子字符串在字符串中位置的方法 使用Microsoft Ajax Minifier減小JavaScript文件大小的方法 javascript操作Cookie（設置、讀取、刪除）方法詳解 js實現同一個頁面多個漸變效果的方法 asp簡單的ajax留言板(采用三層模式) jquery ajax請求實例深入解析 Ajax 和 XML: 五種 Ajax 反模式(3)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved