jquery實現帶復選框的表格行選中刪除時高亮顯示

2019-11-20 22:28:29

字體：大中小

來源：轉載

供稿：網友

通過jquery技術來操作表格是件簡單的事，通過jquery的語法，可以很輕松的完成表格的隔行換色，懸浮高亮，在實際的應用中可能會出現表格中帶復選框的，刪除時，將復選框所在的行的記錄刪除。在這的地方，可以加個特效，單擊某行的同時將該行的復選框選中，該行的背景色也高亮顯示。這樣給人的感覺非常好。

效果如下：

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

功能2的代碼：

復制代碼代碼如下:

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