首頁  >  文章  >  web前端  >  jquery實作帶複選框表格步驟詳解

jquery實作帶複選框表格步驟詳解

php中世界最好的语言
php中世界最好的语言原創
2018-04-25 10:42:013526瀏覽

這次帶給大家jquery實作帶複選框表格步驟詳解,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方法就行了。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

詳解JSON.parse()與JSON.stringify()的區別以及使用方法

JS判斷json有哪些方法

以上是jquery實作帶複選框表格步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn