Jquery中文網 www.prqmtc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jquery實現帶復選框的表格行選中刪除時高亮顯示

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

發布時間:2014-02-25   編輯:www.prqmtc.live
在實際的應用中可能會出現表格中帶復選框的,刪除時,將復選框所在的行的記錄刪除。在這的地方,可以加個特效,單擊某行的同時將該行的復選框選中,該行的背景色也高亮顯示
通過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方法就行了。

您可能感興趣的文章:
jquery實現帶復選框的表格行選中刪除時高亮顯示
jquery實現帶單選按鈕的表格行選中時高亮顯示
jquery在項目中做復選框時遇到的一些問題筆記
jquery統計復選框選中示例
基于jquery實現的類似百度搜索的輸入框自動完成功能
為開發者準備的10款最好的jQuery日歷插件
jquery如何根據值設置默認的選中項
jQuery中選擇器小問題(新人難免遇到)
jquery屬性選擇器not has怎么寫 行懸停高亮顯示
javascript修改表格背景色的示例代碼

關鍵詞: jquery  復選框  表格行  高亮顯示   
[關閉]
一分赛车计划app 申购与认购 内蒙古快3 股票指数计算方法 东方红配资 全球股票指数排名 喜乐彩 申捷配资 福建31选7 介绍番号的网址 贵州11选5 甘肃11选5 福建36选7