jquery實作帶複選框的表格行選中刪除時高亮顯示_jquery

透過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"); } } 如果想要使程式碼生效，需要為表格加上id屬性，屬性值為“tablight”，同時全選/全不選之後呼叫setColor方法就行了。