JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))

更新時間：2012年02月23日 23:03:33 作者：

最近項目里對表格的操作比較多。以往我們要做一些效果的時候往往通過程序代碼來實現(xiàn)，這個努力不值，因為JQuery是完全可以做到的，并且是客戶端運行，不經過服務器處理，給用戶的反應快，也減少了服務器壓力

查了些資料，寫了4個Demo：

1. 隔行著色

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

效果：

2. 高亮含有特定數(shù)據(jù)的行

復制代碼代碼如下:

$("#table2 tr:contains('Fuck')").addClass("selected");

3. 篩選數(shù)據(jù)

復制代碼代碼如下:

 
$("#filter").click( 
function(){ 
$("#table3 .datarow").hide().filter(":contains('ABCDEFG')").show(); 
} 
); 

4. 根據(jù)用戶輸入，即時篩選數(shù)據(jù)

復制代碼代碼如下:

 
$("#keyword").keyup(function(){ 
$("#table3 .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show(); 
}).keyup(); 

篩選前：

輸入ck：

在線演示 http://demo.jb51.net/js/2012/JQueryTableExample/
打包下載 JQueryTableExample_Edi.rar

您可能感興趣的文章:

操作表格

jquery 實現(xiàn)拖動文件上傳加載進度條功能
這篇文章主要介紹了jquery 實現(xiàn)拖動文件上傳加載進度條功能,主要用到的是HTML5的ondrop事件，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-03-03
jQuery中的一些小技巧
本文主要總結了jQuery中的一些小技巧。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
60個很實用的jQuery代碼開發(fā)技巧收集
這篇文章主要介紹了60個很實用的jQuery代碼開發(fā)技巧收集,使用jquery的朋友可以參考下核心代碼的使用，需要的朋友可以參考下
2014-12-12
jqTransform form表單美化插件使用方法
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應該不是大問題。
2012-07-07
jQuery照片伸縮效果不影響其他元素的布局
jQuery照片伸縮效果，不是單純的圖片放大縮小，不影響其他元素的布局,需要的朋友可以參考下
2014-05-05
jQuery 實現(xiàn)左右兩側菜單添加、移除功能
本文通過實例代碼給大家分享了jQuery 實現(xiàn)左右兩側菜單添加、移除功能，需要的朋友參考下吧
2018-01-01
jquery中通過過濾器獲取表單元素的實現(xiàn)代碼
通過過濾器可以獲取特定的表單元素，如非輸入項目或者單選按鈕的已選項目等元素，可用的
2011-07-07
jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下
2015-12-12
Laravel admin實現(xiàn)消息提醒、播放音頻功能
這篇文章主要介紹了Laravel admin實現(xiàn)消息提醒、播放音頻功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
jQuery實現(xiàn)簡單的Ajax調用功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的Ajax調用功能,結合實例形式分析了jQuery的$.ajax方法與后臺php交互實現(xiàn)ajax調用功能相關操作技巧,需要的朋友可以參考下
2019-02-02