快捷導(dǎo)航

用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼

更新時(shí)間：2012年02月10日 17:44:58 作者：

用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼，需要的朋友可以參考下

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>表格隔行背景和突出顯示當(dāng)前行</title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body{ margin:0 auto; font-size:12px;} 
.data_list td{ width:100px;} 
</style> 
<script type="text/javascript"> 
/* 當(dāng)鼠標(biāo)移到表格上是，當(dāng)前一行背景變色 */ 
$(document).ready(function(){ 
$(".data_list tr td").mouseover(function(){ 
$(this).parent().find("td").css("background-color","#d5f4fe"); 
}); 
}) 
/* 當(dāng)鼠標(biāo)在表格上移動(dòng)時(shí)，離開(kāi)的那一行背景恢復(fù) */ 
$(document).ready(function(){ 
$(".data_list tr td").mouseout(function(){ 
var bgc = $(this).parent().attr("bg"); 
$(this).parent().find("td").css("background-color",bgc); 
}); 
}) 
$(document).ready(function(){ 
var color="#ffeab3" 
$(".data_list tr:odd td").css("background-color",color); //改變偶數(shù)行背景色 
/* 把背景色保存到屬性中 */ 
$(".data_list tr:odd").attr("bg",color); 
$(".data_list tr:even").attr("bg","#fff"); 
}) 
</script> 
</head> 
<body> 
<table class="data_list"> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> 
</table> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-06-06
jQuery實(shí)現(xiàn)遍歷XML節(jié)點(diǎn)和屬性的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)遍歷XML節(jié)點(diǎn)和屬性的方法,涉及jQuery針對(duì)xml文件的加載、節(jié)點(diǎn)遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery提示框插件SweetAlert用法分析
這篇文章主要介紹了jQuery提示框插件SweetAlert用法,結(jié)合實(shí)例形式分析了SweetAlert提示框插件基本功能、使用方法及配置項(xiàng)設(shè)置方法,需要的朋友可以參考下
2019-08-08
jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果
這篇文章主要為大家詳細(xì)介紹了jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
使用jQuery中的when實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求對(duì)應(yīng)單個(gè)回調(diào)的例子分享
我在為 Mozilla Developer Network(Mozilla開(kāi)發(fā)者社區(qū)) 寫(xiě)代碼時(shí)需要加載的一個(gè)普通的的腳本文件,以及一個(gè)JSON流。因?yàn)槲覀兪褂胘Query,這意味著需要調(diào)用 jQuery.getScript 和 jQuery.getJSON 函數(shù)
2014-04-04
jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶(hù)登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶(hù)登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口
碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候，我們就需要用JS去處理，去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬；今天弄了2種情況，一個(gè)是相對(duì)于屏幕窗體，一個(gè)是相對(duì)于當(dāng)前的窗口，看代碼
2013-04-04
jquery取消事件冒泡的三種方法(推薦)
下面小編就為大家?guī)?lái)一篇jquery取消事件冒泡的三種方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
基于jQuery封裝的分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了基于jQuery封裝的分頁(yè)組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09