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

效果如下：

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

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

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

/**
* 設(shè)置含有復(fù)選框的表格中的背景色
*/
$(document).ready(function()
{
/**
* 表格行被單擊的時候改變背景色
*/
$("#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);//未選中添加樣式
}
});
});

復(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");
}
}