用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
更新時(shí)間：2012年02月10日 17:44:58 作者：
用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼，需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>
您可能感興趣的文章:
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
- JS與jQuery實(shí)現(xiàn)隔行變色的方法
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法
- 基于jQuery的的一個(gè)隔行變色，鼠標(biāo)移動(dòng)變色的小插件
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery隔行變色與普通JS寫(xiě)法的對(duì)比
- jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
- jQuery實(shí)現(xiàn)的隔行變色功能【案例】
相關(guān)文章
很多朋友都反應(yīng)jquery mobile自帶的圖標(biāo)真的是少之又少，另外我也覺(jué)得圖標(biāo)偏小(系統(tǒng)自帶的是18*18的），于是琢磨著如何自定義按鈕圖標(biāo)，下面小編把我的方法分享在腳本之家平臺(tái)供大家借鑒2015-11-11
也許你在看此文章之前還不知道jquery有一個(gè)noConflict()東西了，它就是為了避免與其它js插件碰到相同變量的一個(gè)解決方法，利用noConflict()可以把變量存到其它指定的變量中去2014-11-11
jQuery中內(nèi)容過(guò)濾器簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中內(nèi)容過(guò)濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了jQuery中內(nèi)容過(guò)濾器的相關(guān)概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用方法,需要的朋友可以參考下2018-03-03
js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁(yè)運(yùn)行后，服務(wù)器控件會(huì)隨機(jī)生成客戶(hù)端id，jquery獲取時(shí)候不太好操作,下面為大家整理了三種方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
jquery中object對(duì)象循環(huán)遍歷的方法
這篇文章主要介紹了jquery中object對(duì)象循環(huán)遍歷的方法，感興趣的小伙伴們可以參考一下2015-12-12
在項(xiàng)目中遇到一個(gè)問(wèn)題，本來(lái)以為是使用dropdownlist的效果的，仔細(xì)一看，其實(shí)是在點(diǎn)擊文本框以后，在其正下方彈出一個(gè)層，里邊有多個(gè)選項(xiàng)進(jìn)行選擇。很像jQuery.datepicker 的效果。2009-10-10
js和jQuery設(shè)置Opacity半透明 兼容IE6
對(duì)于每一個(gè)網(wǎng)站前端開(kāi)發(fā)人員，常常都會(huì)遇到設(shè)置div透明度的需求，比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對(duì)原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。2016-05-05
jQuery查找和過(guò)濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過(guò)濾的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章是對(duì)jQuery中的自動(dòng)完成組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
jquery按回車(chē)提交數(shù)據(jù)的代碼示例
jquery按回車(chē)提交數(shù)據(jù)的代碼示例，很簡(jiǎn)單的一個(gè)方法，看一下就明白2013-11-11