jquery實現(xiàn)帶單選按鈕的表格行選中時高亮顯示
更新時間：2013年08月01日 15:58:55 作者：
如果將選中的這條記錄的行高亮顯示，同時該行的單選按鈕也被選中了，這樣會提高用戶的體驗的，于是本文下了個示例，有需要的朋友可以參考下
上篇博客寫的是復選框的，這次寫的是單選框的，有時查詢的時候，只能選擇一條記錄，如果將選中的這條記錄的行高亮顯示，同時該行的單選按鈕也被選中了，這樣會提高用戶的體驗的。如今的時代，就是用戶體驗的時代。
效果如下：
CSS文件如下如下所示：
.selected{
background:#FF6500;
color:#fff;
}：
這次的js文件的代碼就變得更簡單了，如下所示：
/**
* 設置含有單選按鈕的表格的背景顏色
*/
$(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文件如下如下所示：
復制代碼 代碼如下:
.selected{
background:#FF6500;
color:#fff;
}：
這次的js文件的代碼就變得更簡單了，如下所示：
復制代碼 代碼如下:
/**
* 設置含有單選按鈕的表格的背景顏色
*/
$(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隔行換色和鼠標經過變色的兩種方法
- jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jQuery插件實現(xiàn)表格隔行換色且感應鼠標高亮行變色
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
- jQuery 表格隔行變色代碼[修正注釋版]
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery實現(xiàn)帶復選框的表格行選中刪除時高亮顯示
- JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據)
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
相關文章
這篇文章主要介紹了jQuery中delegate()方法用法,實例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個或多個事件,并規(guī)定當這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
jQuery獲取Select選擇的Text和Value(詳細匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值，以至搜集用戶的需求，本文整理了一些常用而實用的操作技巧，感興趣的朋友可以了解下，就當鞏固自己的知識了，希望本文對你有所幫助2013-01-01
這篇文章主要介紹了jQuery解析json格式數(shù)據的方法,結合實例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據的技巧,需要的朋友可以參考下2016-01-01
jQuery插件jQuery-JSONP開發(fā)ajax調用使用注意事項
jQuery-JSONP是一個支持 JSONP 調用的 jQuery 插件，使用它是因為它支持出錯時的 ajax 回調，而 jQuery 的 $.ajax 不支持，我們已經在實際項目中使用，在開始使用時遇到了2個問題，在這里記錄并分享一下。2013-11-11
這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認值,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery實現(xiàn)的分子運動小球碰撞效果,涉及jQuery基于定時函數(shù)操作頁面元素動態(tài)變換的技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery實現(xiàn)的左右移動焦點圖效果,涉及jQuery結合時間函數(shù)響應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了jQuery源碼解讀之hasClass()方法,以注釋形式較為詳細的分析了hasClass()方法的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
MVC Ajax Helper或Jquery異步加載部分視圖
這篇文章主要介紹了MVC Ajax Helper或Jquery異步加載部分視圖的相關資料,需要的朋友可以參考下2015-11-11