jquery實現(xiàn)帶單選按鈕的表格行選中時高亮顯示
更新時間：2013年08月01日 15:58:55 作者：
如果將選中的這條記錄的行高亮顯示，同時該行的單選按鈕也被選中了，這樣會提高用戶的體驗的，于是本文下了個示例，有需要的朋友可以參考下
上篇博客寫的是復(fù)選框的，這次寫的是單選框的，有時查詢的時候，只能選擇一條記錄，如果將選中的這條記錄的行高亮顯示，同時該行的單選按鈕也被選中了，這樣會提高用戶的體驗的。如今的時代，就是用戶體驗的時代。
效果如下：
CSS文件如下如下所示：
.selected{
background:#FF6500;
color:#fff;
}：
這次的js文件的代碼就變得更簡單了，如下所示：
/**
* 設(shè)置含有單選按鈕的表格的背景顏色
*/
$(document).ready(function()
{
/**
* 表格單擊的時候改變背景色
*/
$("#tablight tr:gt(0)").click(function() //獲取第2行及以后的
{
$(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true);
});
});
如果想要使代碼生效，需要給表格加上id屬性，屬性值為“tablight”。這個一旦做好了，只要在用的時候引用這兩個文件就行了。
效果如下：
CSS文件如下如下所示：
復(fù)制代碼 代碼如下:
.selected{
background:#FF6500;
color:#fff;
}：
這次的js文件的代碼就變得更簡單了，如下所示：
復(fù)制代碼 代碼如下:
/**
* 設(shè)置含有單選按鈕的表格的背景顏色
*/
$(document).ready(function()
{
/**
* 表格單擊的時候改變背景色
*/
$("#tablight tr:gt(0)").click(function() //獲取第2行及以后的
{
$(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true);
});
});
如果想要使代碼生效，需要給表格加上id屬性，屬性值為“tablight”。這個一旦做好了，只要在用的時候引用這兩個文件就行了。
您可能感興趣的文章:
- jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
- jQuery實現(xiàn)表格隔行及滑動,點(diǎn)擊時變色的方法【測試可用】
- jQuery輕松實現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實例代碼
- jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jQuery插件實現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery 表格隔行變色代碼[修正注釋版]
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery實現(xiàn)帶復(fù)選框的表格行選中刪除時高亮顯示
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
相關(guān)文章
Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法
本篇文章是對使用Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單的輪播圖效果，實現(xiàn)自動播放，能手動切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實例形式分析了jQuery響應(yīng)鼠標(biāo)事件實現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)滾動切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
在DOM操作中，常常需要動態(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化，并且達(dá)到各種各樣的人機(jī)交互目的.2016-04-04
easyUI combobox實現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了easyUI combobox實現(xiàn)聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本文分享了jQuery實現(xiàn)限制文本框的輸入長度的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)滑動切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
用jQuery將JavaScript對象轉(zhuǎn)換為querystring查詢字符串的方法
這篇文章主要介紹了用jQuery將JavaScript對象轉(zhuǎn)換為querystring查詢字符串的方法，本文給大家分享兩種方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11