快捷導(dǎo)航

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

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

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