在實際的應用中可能會出現表格中帶復選框的
刪除時
將復選框所在的行的記錄刪除
在這的地方
可以加個特效
單擊某行的同時將該行的復選框選中
該行的背景色也高亮顯示
通過jquery技術來操作表格是件簡單的事通過jquery的語法可以很輕松的完成表格的隔行換色懸浮高亮在實際的應用中可能會出現表格中帶復 選框的刪除時將復選框所在的行的記錄刪除在這的地方可以加個特效單擊某行的同時將該行的復選框選中該行的背景色也高亮顯示這樣給人的感覺非 常好
效果如下
我做的這裡有兩個功能
功能單擊某行該行的復選框被選中同時改變一下背景色
功能單擊全選/全不選標簽後改變行的顏色
兩個功能我封裝到了js文件中使用的時候引入就行了
先看一下CSS的代碼我封裝到了一個css文件中
復制代碼 代碼如下:
selected{
background:#FF
;
color:#fff;
}
在看js文件的代碼
功能的代碼
復制代碼 代碼如下:
/**
* 設置含有復選框的表格中的背景色
*/
$(document)
ready(function()
{
/**
* 表格行被單擊的時候改變背景色
*/
$("#tablight tr:gt(
)")
click(function() //獲取第
行後
{
if ($(this)
hasClass("selected"))//判斷是否選中
{
$(this)
removeClass("selected")
find(":checkbox")
attr("checked"
false);//選中移除樣式
}
else//設置選中
{
$(this)
addClass("selected")
find(":checkbox")
attr("checked"
true);//未選中添加樣式
}
});
});
功能的代碼
復制代碼 代碼如下:
/**
* 單擊全選和反選之後改變背景色
*/
function setColor()//設置tr的背景顏色
{
var checkboxs = $("#tablight tr:gt(
) input[type=checkbox]");//得到所有的復選框
var boxeds = $("#tablight tr:gt(
) input[type=checkbox]:checked");//得到被選擇的復選框
if(boxeds
length >
)
{
checkboxs
parent()
parent()
addClass("selected");//復選框在td裡
}
else
{
checkboxs
parent()
parent()
removeClass("selected");
}
}
如果想要使代碼生效需要給表格加上id屬性屬性值為“tablight”同時全選/全不選之後調用setColor方法就行了
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19907.html
