歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery完成帶單選按鈕的表格行高亮顯示

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

上篇見:jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

效果如下:

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”。這個一旦做好了,只要在用的時候引用這兩個文件就行了。

Copyright © Linux教程網 All Rights Reserved