jquery實(shí)現(xiàn)帶復(fù)選框的表格行選中刪除時(shí)高亮顯示

更新時(shí)間：2013年08月01日 16:09:15 作者：

在實(shí)際的應(yīng)用中可能會(huì)出現(xiàn)表格中帶復(fù)選框的，刪除時(shí)，將復(fù)選框所在的行的記錄刪除。在這的地方，可以加個(gè)特效，單擊某行的同時(shí)將該行的復(fù)選框選中，該行的背景色也高亮顯示

通過(guò)jquery技術(shù)來(lái)操作表格是件簡(jiǎn)單的事，通過(guò)jquery的語(yǔ)法，可以很輕松的完成表格的隔行換色，懸浮高亮，在實(shí)際的應(yīng)用中可能會(huì)出現(xiàn)表格中帶復(fù)選框的，刪除時(shí)，將復(fù)選框所在的行的記錄刪除。在這的地方，可以加個(gè)特效，單擊某行的同時(shí)將該行的復(fù)選框選中，該行的背景色也高亮顯示。這樣給人的感覺(jué)非常好。

效果如下：

我做的這里有兩個(gè)功能：
功能1、單擊某行，該行的復(fù)選框被選中，同時(shí)改變一下背景色。
功能2、單擊全選/全不選標(biāo)簽后，改變行的顏色。
兩個(gè)功能我封裝到了js文件中，使用的時(shí)候引入就行了。
先看一下CSS的代碼，我封裝到了一個(gè)css文件中

復(fù)制代碼代碼如下:

 
.selected{ 
background:#FF6500; 
color:#fff; 
} 

在看js文件的代碼：
功能1的代碼：

復(fù)制代碼代碼如下:

 
/** 
* 設(shè)置含有復(fù)選框的表格中的背景色 
*/ 
$(document).ready(function() 
{ 
/** 
* 表格行被單擊的時(shí)候改變背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //獲取第2行后 
{ 
if ($(this).hasClass("selected"))//判斷是否選中 
{ 
$(this).removeClass("selected").find(":checkbox").attr("checked",false);//選中移除樣式 
} 
else//設(shè)置選中 
{ 
$(this).addClass("selected").find(":checkbox").attr("checked",true);//未選中添加樣式 
} 
}); 
}); 

功能2的代碼：

復(fù)制代碼代碼如下:

 
/** 
* 單擊全選和反選之后改變背景色 
*/ 
function setColor()//設(shè)置tr的背景顏色 
{ 
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的復(fù)選框 
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被選擇的復(fù)選框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//復(fù)選框在td里 
} 
else 
{ 
checkboxs.parent().parent().removeClass("selected"); 
} 
} 

如果想要使代碼生效，需要給表格加上id屬性，屬性值為“tablight”，同時(shí)全選/全不選之后調(diào)用setColor方法就行了。

您可能感興趣的文章:

相關(guān)文章

jQuery.ajax向后臺(tái)傳遞數(shù)組問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了jQuery.ajax向后臺(tái)傳遞數(shù)組問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
簡(jiǎn)要了解jQuery移動(dòng)web開(kāi)發(fā)的響應(yīng)式布局設(shè)計(jì)
這篇文章主要介紹了jQuery移動(dòng)web開(kāi)發(fā)的響應(yīng)式布局設(shè)計(jì),jQuery是JavaScript世界中最具人氣的模塊或者說(shuō)類庫(kù),需要的朋友可以參考下
2015-12-12
談?wù)刯Query之Deferred源碼剖析
這篇文章主要介紹了談?wù)刯Query之Deferred源碼剖析,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
jquery點(diǎn)贊功能實(shí)現(xiàn)代碼點(diǎn)個(gè)贊吧!
點(diǎn)贊功能很多地方都會(huì)出現(xiàn)，如何實(shí)現(xiàn)愛(ài)心點(diǎn)贊功能，這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)贊功能實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
基于JQuery的類似新浪微博展示信息效果的代碼
滑動(dòng)向下時(shí)，把最后一個(gè)節(jié)點(diǎn)copy過(guò)去插入在第一節(jié)點(diǎn)中，并在顯示時(shí)隱藏，再通過(guò)透明漸變顯示出來(lái)。附上源碼，需要的朋友可以copy
2012-07-07
Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法
下面小編就為大家?guī)?lái)一篇Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jquery 仿QQ校友的DIV模擬窗口效果源碼
本文使用大名頂頂?shù)膉query來(lái)實(shí)現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗(yàn)一些都是非常棒的
2010-03-03
easyui簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了easyui簡(jiǎn)介，詳細(xì)的介紹了什么是easyui和easyui的用法，有興趣的可以了解一下
2017-07-07
jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說(shuō)明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-06-06
toggle()隱藏問(wèn)題的解決方法
一個(gè)實(shí)例中使用到toggle函數(shù)，但是調(diào)用的時(shí)候會(huì)把元素隱藏掉，經(jīng)搜索終于找到了原因，需要的朋友可以參考下
2014-02-02