jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過(guò)變色的兩種方法
更新時(shí)間：2014年06月15日 10:03:22 投稿：whsnow
這篇文章主要介紹jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過(guò)變色的兩種方法,需要的朋友可以參考下
一、隔行換色
$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");
或者一行搞定：
$("table tr:nth-child(odd)").css("background-color","#eeeeee");
:nth-child 匹配其父元素下的第N個(gè)子或奇偶元素
二、鼠標(biāo)經(jīng)過(guò)變色
$("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()都可以同時(shí)綁定多個(gè)事件或分開(kāi)。
復(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個(gè)子或奇偶元素
二、鼠標(biāo)經(jīng)過(guò)變色
復(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()都可以同時(shí)綁定多個(gè)事件或分開(kāi)。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫(kù)的方法
- jquery實(shí)現(xiàn)table鼠標(biāo)經(jīng)過(guò)變色代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- jQuery實(shí)現(xiàn)table中的tr上下移動(dòng)并保持序號(hào)不變的實(shí)例代碼
- jQuery插件dataTables添加序號(hào)列的方法
- JQuery動(dòng)態(tài)給table添加、刪除行 改進(jìn)版
- jquery獲取table中的某行全部td的內(nèi)容方法
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery實(shí)現(xiàn)獲取table中鼠標(biāo)click點(diǎn)擊位置行號(hào)與列號(hào)的方法
相關(guān)文章
下面小編就為大家?guī)?lái)一篇使用JQuery選擇HTML遍歷函數(shù)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
這篇文章主要介紹了jquery選擇器排除某個(gè)DOM元素的方法,也就是在選中的一些元素中,過(guò)濾一些不需要的,使用jquery not選擇器實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
jQuery Validate 校驗(yàn)多個(gè)相同name的方法
這篇文章主要介紹了jQuery Validate 校驗(yàn)多個(gè)相同name的方法,需要的朋友可以參考下2017-05-05
jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
刪除HTML元素可以使用remove及empty，下面有關(guān)這兩個(gè)方法的使用將以示例的方式為大家介紹下2014-08-08
這篇文章主要介紹了jQuery表單驗(yàn)證的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)表單必填項(xiàng)進(jìn)行驗(yàn)證的方法,需要的朋友可以參考下2016-10-10
easyui combotree加載靜態(tài)數(shù)據(jù)問(wèn)題（選不上）解決方法
這篇文章主要介紹了easyui combotree加載靜態(tài)數(shù)據(jù)問(wèn)題,選不上）2016-12-12
從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別
這篇文章主要介紹了從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實(shí)現(xiàn)提交后取得數(shù)據(jù)，詳細(xì)實(shí)現(xiàn)及截圖如下，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了jQuer輸入框插件封裝方法，這樣可以提高程序員的開(kāi)發(fā)效率，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08