詳解jQuery簡單的表格應用

更新時間：2016年12月16日 11:56:24 作者：老板丶魚丸粗面

本文主要對表格的簡單應用：表格變色;表格展開關閉;表格內(nèi)容篩選進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧

大致介紹

在CSS技術之前，網(wǎng)頁的布局基本都是依靠表格制作，當有了CSS之后，表格就被很多設計師所拋棄，但是表格也有他的用武之地，比如數(shù)據(jù)列表，下面以表格中常見的幾個應用來加深對jQuery的認識。

表格變色

基本的結構：

<table>
    <thead>
      <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
    </thead>
    <tbody>
      <tr><td>張三</td><td>男</td><td>杭州</td></tr>
      <tr><td>王五</td><td>女</td><td>江蘇</td></tr>
      <tr><td>李斯</td><td>男</td><td>北京</td></tr>
      <tr><td>趙六</td><td>女</td><td>蘭州</td></tr>
      <tr><td>往往</td><td>男</td><td>酒泉</td></tr>
      <tr><td>李師傅</td><td>男</td><td>東京</td></tr>
    </tbody>
  </table>

1、普通的隔行變色

首先定義兩個樣式

 .even{
    background: #FFF38F;
  }
 .odd{
    background: #FFFFEE;
  }

添加變色

 $('tr:odd').addClass('odd');
 $('tr:even').addClass('even');

2、單選框控制表格行高亮

在每一行之前加一個單選按鈕，當單擊某一行后，此行被選中高亮顯示并且單選框被選中

$('tbody>tr').click(function(){
    $(this)
      .addClass('selected')
      .siblings().removeClass('selected')
      .end()
      .find(':radio').attr('checked',true);
  });

3、復選框控制表格行高亮

  $('tbody>tr').click(function(){
    if($(this).hasClass('selected')){
      $(this).removeClass('selected')
          .find(':checkbox').attr('checked',false);
    }else{
      $(this).addClass('selected')
          .find(':checkbox').attr('checked',true);
    }
  });

表格展開關閉

基本結構：

<table>
    <thead>
      <tr><th></th><th>姓名</th><th>性別</th><th>暫住地</th></tr>
    </thead>
    <tbody>
      <tr class="parent" id="row_01"><td colspan="3">前臺設計組</td></tr>
      <tr class="child_row_01"><td></td><td>張三</td><td>男</td><td>杭州</td></tr>
      <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江蘇</td></tr>
      <tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</td></tr>
      <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
      <tr class="child_row_02"><td></td><td>趙六</td><td>女</td><td>蘭州</td></tr>
      <tr class="parent" id="row_03"><td colspan="3">后臺開發(fā)組</td></tr>
      <tr class="child_row_03"><td></td><td>往往</td><td>男</td><td>酒泉</td></tr>
      <tr class="child_row_03"><td></td><td>李師傅</td><td>男</td><td>東京</td></tr>
    </tbody>
  </table>

添加事件，當點擊一個分類的標題時，這個分類關閉或者打開

  $('tr.parent').click(function(){
    $(this).toggleClass('selected')
       .siblings('.child_' + this.id).toggle();
  });

表格內(nèi)容篩選

基本結構：

<table>
    <thead>
      <tr><th></th><th>姓名</th><th>性別</th><th>暫住地</th></tr>
    </thead>
    <tbody>
      <tr class="parent" id="row_01"><td colspan="3">前臺設計組</td></tr>
      <tr class="child_row_01"><td></td><td>張三</td><td>男</td><td>杭州</td></tr>
      <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江蘇</td></tr>
      <tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</td></tr>
      <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
      <tr class="child_row_02"><td></td><td>趙六</td><td>女</td><td>蘭州</td></tr>
      <tr class="parent" id="row_03"><td colspan="3">后臺開發(fā)組</td></tr>
      <tr class="child_row_03"><td></td><td>往往</td><td>男</td><td>酒泉</td></tr>
      <tr class="child_row_03"><td></td><td>李師傅</td><td>男</td><td>東京</td></tr>
    </tbody>
  </table>
  <input type="text" id="filterName" />

添加事件

 $('#filterName').keyup(function(){
   $('table tbody tr').hide().filter(":contains(' "+($(this).val())+" ' )").show();
 });

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

jQuery分別獲取選中的復選框值的示例
這篇文章主要介紹了jQuery如何分別獲取選中的復選框值,需要的朋友可以參考下
2014-06-06
jquery帶下拉菜單和焦點圖代碼分享
這篇文章主要介紹了jquery帶下拉菜單和焦點圖代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery表單驗證簡單示例
這篇文章主要介紹了jQuery表單驗證的方法,結合簡單實例形式分析了jQuery針對表單必填項進行驗證的方法,需要的朋友可以參考下
2016-10-10
jQuery按需加載輪播圖(web前端性能優(yōu)化)
這篇文章主要介紹了jQuery按需加載輪播圖(web前端性能優(yōu)化)知識,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
基于jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音是一款很實用的在線轉(zhuǎn)換功能，此插件已經(jīng)把漢字打包成一個插件庫，調(diào)用的時間很簡單，只調(diào)用一個方法就可以實現(xiàn)轉(zhuǎn)換了
2015-05-05
jQuery實現(xiàn)為動態(tài)添加的元素綁定事件實例分析
這篇文章主要介紹了jQuery實現(xiàn)為動態(tài)添加的元素綁定事件,結合實例形式分析了jQuery常見的事件綁定相關操作技巧與注意事項,需要的朋友可以參考下
2018-09-09
jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
本文章介紹了，jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法，需要的朋友可以參考一下
2013-03-03
jQuery實現(xiàn)底部浮動窗口效果
這篇文章主要介紹了jQuery實現(xiàn)底部浮動窗口效果,涉及jQuery事件響應及頁面元素動態(tài)變換的相關操作技巧,需要的朋友可以參考下
2016-09-09
jquery實現(xiàn)圖片放大鏡功能
這篇文章主要介紹了jquery實現(xiàn)圖片放大鏡功能，需要的朋友可以參考下
2015-11-11
EasyUI在表單提交之前進行驗證的實例代碼
這篇文章主要介紹了EasyUI在表單提交之前進行驗證的實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06