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文件的代碼就變得更簡單了，如下所示：
/**
* 設(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文件的代碼就變得更簡單了，如下所示：
復(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)過變色的兩種方法
- jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測試可用】
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- 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實(shí)現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法
本篇文章是對使用Jquery實(shí)現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單的輪播圖效果，實(shí)現(xiàn)自動(dòng)播放，能手動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對頁面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09
基于jQuery實(shí)現(xiàn)滾動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)滾動(dòng)切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在DOM操作中，常常需要?jiǎng)討B(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化，并且達(dá)到各種各樣的人機(jī)交互目的.2016-04-04
easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery獲取form表單input元素值的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本文分享了jQuery實(shí)現(xiàn)限制文本框的輸入長度的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
用jQuery將JavaScript對象轉(zhuǎn)換為querystring查詢字符串的方法
這篇文章主要介紹了用jQuery將JavaScript對象轉(zhuǎn)換為querystring查詢字符串的方法，本文給大家分享兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11