欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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文件如下如下所示:
復(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è)文件就行了。

相關(guān)文章

  • jQuery中delegate()方法用法實(shí)例

    jQuery中delegate()方法用法實(shí)例

    這篇文章主要介紹了jQuery中delegate()方法用法,實(shí)例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery獲取Select選擇的Text和Value(詳細(xì)匯總)

    jQuery獲取Select選擇的Text和Value(詳細(xì)匯總)

    Select選擇的Text和Value在使用中可能都需要獲取到它們的值,以至搜集用戶的需求,本文整理了一些常用而實(shí)用的操作技巧,感興趣的朋友可以了解下,就當(dāng)鞏固自己的知識(shí)了,希望本文對(duì)你有所幫助
    2013-01-01
  • jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例

    jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例

    這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下
    2016-01-01
  • jQuery插件jQuery-JSONP開發(fā)ajax調(diào)用使用注意事項(xiàng)

    jQuery插件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-11
  • jQuery 隱藏和顯示 input 默認(rèn)值示例

    jQuery 隱藏和顯示 input 默認(rèn)值示例

    這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認(rèn)值,需要的朋友可以參考下
    2014-06-06
  • jQuery實(shí)現(xiàn)的分子運(yùn)動(dòng)小球碰撞效果

    jQuery實(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-01
  • jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果

    jQuery實(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-01
  • jQuery實(shí)現(xiàn)視頻展示效果

    jQuery實(shí)現(xiàn)視頻展示效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)視頻展示效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • jQuery源碼解讀之hasClass()方法分析

    jQuery源碼解讀之hasClass()方法分析

    這篇文章主要介紹了jQuery源碼解讀之hasClass()方法,以注釋形式較為詳細(xì)的分析了hasClass()方法的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • MVC Ajax Helper或Jquery異步加載部分視圖

    MVC Ajax Helper或Jquery異步加載部分視圖

    這篇文章主要介紹了MVC Ajax Helper或Jquery異步加載部分視圖的相關(guān)資料,需要的朋友可以參考下
    2015-11-11

最新評(píng)論