jquery實(shí)現(xiàn)帶單選按鈕的表格行選中時(shí)高亮顯示
更新時(shí)間:2013年08月01日 15:58:55 作者:
如果將選中的這條記錄的行高亮顯示,同時(shí)該行的單選按鈕也被選中了,這樣會(huì)提高用戶的體驗(yàn)的,于是本文下了個(gè)示例,有需要的朋友可以參考下
上篇博客寫的是復(fù)選框的,這次寫的是單選框的,有時(shí)查詢的時(shí)候,只能選擇一條記錄,如果將選中的這條記錄的行高亮顯示,同時(shí)該行的單選按鈕也被選中了,這樣會(huì)提高用戶的體驗(yàn)的。如今的時(shí)代,就是用戶體驗(yàn)的時(shí)代。
效果如下:
CSS文件如下如下所示:
.selected{
background:#FF6500;
color:#fff;
}:
這次的js文件的代碼就變得更簡(jiǎn)單了,如下所示:
/**
* 設(shè)置含有單選按鈕的表格的背景顏色
*/
$(document).ready(function()
{
/**
* 表格單擊的時(shí)候改變背景色
*/
$("#tablight tr:gt(0)").click(function() //獲取第2行及以后的
{
$(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true);
});
});
如果想要使代碼生效,需要給表格加上id屬性,屬性值為“tablight”。這個(gè)一旦做好了,只要在用的時(shí)候引用這兩個(gè)文件就行了。
效果如下:
CSS文件如下如下所示:
復(fù)制代碼 代碼如下:
.selected{
background:#FF6500;
color:#fff;
}:
這次的js文件的代碼就變得更簡(jiǎn)單了,如下所示:
復(fù)制代碼 代碼如下:
/**
* 設(shè)置含有單選按鈕的表格的背景顏色
*/
$(document).ready(function()
{
/**
* 表格單擊的時(shí)候改變背景色
*/
$("#tablight tr:gt(0)").click(function() //獲取第2行及以后的
{
$(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true);
});
});
如果想要使代碼生效,需要給表格加上id屬性,屬性值為“tablight”。這個(gè)一旦做好了,只要在用的時(shí)候引用這兩個(gè)文件就行了。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過(guò)變色的兩種方法
- jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測(cè)試可用】
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery 表格隔行變色代碼[修正注釋版]
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery實(shí)現(xiàn)帶復(fù)選框的表格行選中刪除時(shí)高亮顯示
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
相關(guān)文章
jQuery獲取Select選擇的Text和Value(詳細(xì)匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值,以至搜集用戶的需求,本文整理了一些常用而實(shí)用的操作技巧,感興趣的朋友可以了解下,就當(dāng)鞏固自己的知識(shí)了,希望本文對(duì)你有所幫助2013-01-01jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01jQuery插件jQuery-JSONP開發(fā)ajax調(diào)用使用注意事項(xiàng)
jQuery-JSONP是一個(gè)支持 JSONP 調(diào)用的 jQuery 插件,使用它是因?yàn)樗С殖鲥e(cuò)時(shí)的 ajax 回調(diào),而 jQuery 的 $.ajax 不支持,我們已經(jīng)在實(shí)際項(xiàng)目中使用,在開始使用時(shí)遇到了2個(gè)問(wèn)題,在這里記錄并分享一下。2013-11-11jQuery實(shí)現(xiàn)的分子運(yùn)動(dòng)小球碰撞效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分子運(yùn)動(dòng)小球碰撞效果,涉及jQuery基于定時(shí)函數(shù)操作頁(yè)面元素動(dòng)態(tài)變換的技巧,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果,涉及jQuery結(jié)合時(shí)間函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01MVC Ajax Helper或Jquery異步加載部分視圖
這篇文章主要介紹了MVC Ajax Helper或Jquery異步加載部分視圖的相關(guān)資料,需要的朋友可以參考下2015-11-11