jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
更新時間：2014年06月15日 10:03:22 投稿：whsnow
這篇文章主要介紹jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法,需要的朋友可以參考下
一、隔行換色
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定：
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N個子或奇偶元素
二、鼠標(biāo)經(jīng)過變色
$("tr").live({
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})
或者
$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})
當(dāng)然live()和bind()都可以同時綁定多個事件或分開。
復(fù)制代碼 代碼如下:
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定：
復(fù)制代碼 代碼如下:
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N個子或奇偶元素
二、鼠標(biāo)經(jīng)過變色
復(fù)制代碼 代碼如下:
$("tr").live({
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})
或者
復(fù)制代碼 代碼如下:
$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})
當(dāng)然live()和bind()都可以同時綁定多個事件或分開。
您可能感興趣的文章:
- jquery實現(xiàn)的鼠標(biāo)拖動排序Li或Table
- jQuery實現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫的方法
- jquery實現(xiàn)table鼠標(biāo)經(jīng)過變色代碼
- jQuery實現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼
- jQuery插件dataTables添加序號列的方法
- JQuery動態(tài)給table添加、刪除行 改進(jìn)版
- jquery獲取table中的某行全部td的內(nèi)容方法
- jquery遍歷table的tr獲取td的值實現(xiàn)方法
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery實現(xiàn)獲取table中鼠標(biāo)click點擊位置行號與列號的方法
相關(guān)文章
input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個小程序，代碼很簡單2014-06-06
有時候需要設(shè)置iframe的src屬性，下面是基于jquery的實現(xiàn)代碼。2010-11-11
我們用一個語句就讓下面五個div顯示成功，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了jQuery中的$.ajax()方法的應(yīng)用，需要的朋友可以參考下2014-05-05
利用jQuery來實現(xiàn)，其實就幾行代碼的事。即便如此，由于js語言的思維方式，還是一直沒有把握好，加上一個css的問題，導(dǎo)致弄了好久才出來效果。2009-12-12
jquery對dom的操作包括了對html內(nèi)容的添加、刪除元素/內(nèi)容、操作CSS等等，本文整理了一些dom操作的常用方法，感興趣的朋友可以參考下哈2013-06-06
解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
項目中應(yīng)用jQuery解析讀取XML語言配置文件來實現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。2009-10-10
jquery對象和javascript對象即DOM對象相互轉(zhuǎn)換
對于已經(jīng)是一個 DOM 對象，只需要用 $() 把DOM對象包裝起來，就可以獲得一個 jQuery 對象了，使用[index]和.get(index)可以轉(zhuǎn)為DOM對象2014-08-08
在本篇文章里小編給大家分享了關(guān)于Jquery獲取radio選中值實例總結(jié)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-01-01