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ù)選框選中,該行的背景色也高亮顯示
通過jquery技術(shù)來(lái)操作表格是件簡(jiǎn)單的事,通過jquery的語(yǔ)法,可以很輕松的完成表格的隔行換色,懸浮高亮,在實(shí)際的應(yīng)用中可能會(huì)出現(xiàn)表格中帶復(fù)選框的,刪除時(shí),將復(fù)選框所在的行的記錄刪除。在這的地方,可以加個(gè)特效,單擊某行的同時(shí)將該行的復(fù)選框選中,該行的背景色也高亮顯示。這樣給人的感覺非常好。
效果如下:
我做的這里有兩個(gè)功能:
功能1、單擊某行,該行的復(fù)選框被選中,同時(shí)改變一下背景色。
功能2、單擊全選/全不選標(biāo)簽后,改變行的顏色。
兩個(gè)功能我封裝到了js文件中,使用的時(shí)候引入就行了。
先看一下CSS的代碼,我封裝到了一個(gè)css文件中
.selected{
background:#FF6500;
color:#fff;
}
在看js文件的代碼:
功能1的代碼:
/**
* 設(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的代碼:
/**
* 單擊全選和反選之后改變背景色
*/
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方法就行了。
效果如下:

我做的這里有兩個(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方法就行了。
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- jQuery實(shí)現(xiàn)點(diǎn)擊后標(biāo)記當(dāng)前菜單位置(背景高亮菜單)效果
- jQuery編輯器KindEditor4.1.4代碼高亮顯示設(shè)置教程
- jquery(1.3.2) 高亮選中圖片邊框
- Jquery 高亮顯示文本中重要的關(guān)鍵字
- jquery實(shí)現(xiàn)頁(yè)面關(guān)鍵詞高亮顯示的方法
- jQuery語(yǔ)法高亮插件支持各種程序源代碼語(yǔ)法著色加亮
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
- jQuery實(shí)現(xiàn)當(dāng)前頁(yè)面標(biāo)簽高亮顯示的方法
- jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
相關(guān)文章
jQuery Study Notes學(xué)習(xí)筆記 (二)
jquery簡(jiǎn)單選擇器的使用方法。jquery中最基本的東西了。2010-08-08zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié)
這篇文章主要介紹了zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié) 的相關(guān)資料,需要的朋友可以參考下2016-07-07基于jquery的防止大圖片撐破頁(yè)面的實(shí)現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個(gè)應(yīng)用:讓圖片未加載完畢就實(shí)現(xiàn)按比例自適應(yīng),防止圖片撐破布局(尤其是外鏈圖片)2011-10-10jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法,需要的的朋友參考下吧2017-01-01基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02