【jQuery基礎學習】04 jQuery中的表格操作及cookie插件的使用

 這章本來準備寫成jQuery的表單操作和表格操作的。

然而昨天吧jQuery的表單操作看完，發現全部在炒之前章節的剩飯，所以就沒寫出來。

那麼今天就來看看表格吧。

因為平常做的都是公司的內部管理系統，所以說數據表格用到的還是比較多的。那麼在這裡寫出來說不定還能用上。

關於jQuery的表格應用

• 隔行變色

  $(function(){
    $("tbody>tr:odd").addClass("樣式1");//odd是選取奇數行
    $("tbody>tr:even").addClass("樣式2");//even是選取偶數行
  })

• 單選框控製表格行高亮

  $('tbody>tr').click(function(){
    $(this).addClass('選中樣式').siblings().removeClass('選中樣式').end().find(':radio').attr('checked',true);
  //請註意這裡的end(),當用了siblings()後，後面所有的元素實際上操作的是this的統計元素，而用了end()後就回到了之前的$(this)元素
  });
  //註意到我們最開始初始化表格的時候，如果預設有單選框被選中，那麼也需要進行處理。
  $(table :radio:checked).parent().parent().addClass('selected');
  //或者
  $(table :radio:checked).parents("tr").addClass('selected');
  //或者
  $(table>tr:has(:checked)).addClass('selected');

• 覆選框控製表格行高亮

  //最簡單的那種就不寫了，看看下麵這種
  $('tbody>tr').click(function(){
    //判斷當前是否選中
    var hasSelected=$(this).hasClass('selected');
    $(this)[hasSelected?"removeClass":"addClass"]('selected')
       .find(':checkbox').attr("checked",!hasSelected);
  });
  //本示例突出[hasSelected?"removeClass":"addClass"]這種玩法
  //這實際上就是javascript的用法，因為一個對象裡面的東西既可以用.這樣的形式取出來，又可以用類似數組的形式取出來

• 表格展開關閉

  //這種情況就是解決表格裡面行數據有層級結構的
  $(function(){
      $('tr .parent').click(function(){
          $(this).toggleClass("selected")
                 .siblings('.child_'+this.id).toggle();
      })
  })

• 表格內容篩選

  //下麵是表格的篩選操作
  $(function(){
      $("#filterName").keyup(function(){
          $("table tbody tr").hide()
              .filter(":contains('"+($(this).val())+"')").show();
      });
  });
  //這種一般都是用不上，因為我們要的表格一般都是翻頁的，然後去後臺查篩選，然後傳數據給前臺。

好吧，這本書本章的其他節都是在炒剩飯，唯一新用到的函數是

var $div_li=$("li");
$div_li.click(function(){
    var index=$div_li.index(this);//這種用法很有趣，其次就是index這個函數，是用於在選擇出來的元素中，然後根據元素來獲取元素的索引
})

還有就是js可以操作整個樣式表的替換（這個我以前真的沒玩過）

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
$(function(){
   $("#cssfile").attr("href","css/skin_1.css"); 
})

還介紹了jQuery的一款操作cookie的小插件，可以幫忙簡化cookie操作

<script src="js/jquery.cookie.js" type="text/javascript"></script>

$.cookie("MyCssSkin","232",{path:'/',expires:10});//存cookie
//這裡232為cookie的值，expires為cookie的期限，比如10就是存10天，-1就是刪除cookie，刪除也可以寫成 $.cookie(’MyCssSkin’, null); 
//這裡的path:'/'必須這麼寫，否則cookie的路徑就會根據目錄路徑的不同自動設置，如http://www.xxx.com/user/,path會被設置為 '/user'
var cookie_skin=$.cookie("MyCssSkin");//取cookie