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

效果如下：

我做的這里有兩個(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方法就行了。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com