首頁 > web前端 > js教程 > jquery實作單選按鈕的表格行選中時高亮顯示_jquery

jquery實作單選按鈕的表格行選中時高亮顯示_jquery

WBOY
發布: 2016-05-16 17:27:30
原創
1568 人瀏覽過

上篇部落格寫的是複選框的,這次寫的是單選框的,有時查詢的時候,只能選擇一條記錄,如果將選中的這條記錄的行高亮顯示,同時該行的單選按鈕也被選中了,這樣會提高使用者的體驗的。如今的時代,就是使用者體驗的時代。

效果如下:
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”。這個一旦做好了,只要在用的時候引用這兩份文件就行了。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板