用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
更新時間：2012年02月10日 17:44:58 作者：
用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼，需要的朋友可以參考下
復制代碼 代碼如下:
<!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>表格隔行背景和突出顯示當前行</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">
/* 當鼠標移到表格上是，當前一行背景變色 */
$(document).ready(function(){
$(".data_list tr td").mouseover(function(){
$(this).parent().find("td").css("background-color","#d5f4fe");
});
})
/* 當鼠標在表格上移動時，離開的那一行背景恢復 */
$(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>
您可能感興趣的文章:
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
- JS與jQuery實現(xiàn)隔行變色的方法
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- jQuery實現(xiàn)簡單隔行變色的方法
- 基于jQuery的的一個隔行變色，鼠標移動變色的小插件
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
- jQuery隔行變色與普通JS寫法的對比
- jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
- jQuery實現(xiàn)的隔行變色功能【案例】
相關文章
jQuery實現(xiàn)簡易商城系統(tǒng)項目實操
這篇文章主要介紹了jQuery實現(xiàn)簡易商城系統(tǒng)項目實操，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06
jQuery實現(xiàn)遍歷XML節(jié)點和屬性的方法示例
這篇文章主要介紹了jQuery實現(xiàn)遍歷XML節(jié)點和屬性的方法,涉及jQuery針對xml文件的加載、節(jié)點遍歷等相關操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jQuery提示框插件SweetAlert用法,結合實例形式分析了SweetAlert提示框插件基本功能、使用方法及配置項設置方法,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了jQuery焦點圖左右轉換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
使用jQuery中的when實現(xiàn)多個AJAX請求對應單個回調的例子分享
我在為 Mozilla Developer Network(Mozilla開發(fā)者社區(qū)) 寫代碼時需要加載的一個普通的的腳本文件,以及一個JSON流。 因為我們使用jQuery,這意味著需要調用 jQuery.getScript 和 jQuery.getJSON 函數(shù)2014-04-04
jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結合實例形式較為詳細分析了jQuery結合ajax進行表單登陸驗證操作的具體步驟與相關操作技巧,需要的朋友可以參考下2017-02-02
碰到?jīng)]有固定高或者固定寬或者固定高和寬的時候，我們就需要用JS去處理，去動態(tài)獲取當前窗口高或者寬；今天弄了2種情況，一個是相對于屏幕窗體，一個是相對于當前的窗口，看代碼2013-04-04
下面小編就為大家?guī)硪黄猨query取消事件冒泡的三種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了基于jQuery封裝的分頁組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)倒計時小應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09