JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
更新時(shí)間：2012年02月23日 23:03:33 作者：
最近項(xiàng)目里對表格的操作比較多。以往我們要做一些效果的時(shí)候往往通過程序代碼來實(shí)現(xiàn)，這個(gè)努力不值，因?yàn)镴Query是完全可以做到的，并且是客戶端運(yùn)行，不經(jīng)過服務(wù)器處理，給用戶的反應(yīng)快，也減少了服務(wù)器壓力
查了些資料，寫了4個(gè)Demo：
1. 隔行著色
$('#table1 tr:odd').addClass('odd');
$('#table1 tr:even').addClass('even');
$("#table2 tr:contains('Fuck')").addClass("selected");
$("#filter").click(
function(){
$("#table3 .datarow").hide().filter(":contains('ABCDEFG')").show();
}
);
4. 根據(jù)用戶輸入，即時(shí)篩選數(shù)據(jù)
$("#keyword").keyup(function(){
$("#table3 .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup();
1. 隔行著色
復(fù)制代碼 代碼如下:
$('#table1 tr:odd').addClass('odd');
$('#table1 tr:even').addClass('even');
效果：
2. 高亮含有特定數(shù)據(jù)的行
復(fù)制代碼 代碼如下:
$("#table2 tr:contains('Fuck')").addClass("selected");
3. 篩選數(shù)據(jù)
復(fù)制代碼 代碼如下:
$("#filter").click(
function(){
$("#table3 .datarow").hide().filter(":contains('ABCDEFG')").show();
}
);
4. 根據(jù)用戶輸入，即時(shí)篩選數(shù)據(jù)
復(fù)制代碼 代碼如下:
$("#keyword").keyup(function(){
$("#table3 .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup();
篩選前：
輸入ck：
在線演示 http://demo.jb51.net/js/2012/JQueryTableExample/
打包下載 JQueryTableExample_Edi.rar
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jQuery實(shí)現(xiàn)點(diǎn)擊后標(biāo)記當(dāng)前菜單位置(背景高亮菜單)效果
- jQuery編輯器KindEditor4.1.4代碼高亮顯示設(shè)置教程
- jquery(1.3.2) 高亮選中圖片邊框
- Jquery 高亮顯示文本中重要的關(guān)鍵字
- jquery實(shí)現(xiàn)帶復(fù)選框的表格行選中刪除時(shí)高亮顯示
- jquery實(shí)現(xiàn)頁面關(guān)鍵詞高亮顯示的方法
- jQuery語法高亮插件支持各種程序源代碼語法著色加亮
- jQuery實(shí)現(xiàn)當(dāng)前頁面標(biāo)簽高亮顯示的方法
- jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
相關(guān)文章
jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能
這篇文章主要介紹了jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能,主要用到的是HTML5的ondrop事件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
60個(gè)很實(shí)用的jQuery代碼開發(fā)技巧收集
這篇文章主要介紹了60個(gè)很實(shí)用的jQuery代碼開發(fā)技巧收集,使用jquery的朋友可以參考下核心代碼的使用，需要的朋友可以參考下2014-12-12
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當(dāng)然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實(shí)例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問題。2012-07-07
jQuery照片伸縮效果，不是單純的圖片放大縮小，不影響其他元素的布局,需要的朋友可以參考下2014-05-05
jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能，需要的朋友參考下吧2018-01-01
jquery中通過過濾器獲取表單元素的實(shí)現(xiàn)代碼
通過過濾器可以獲取特定的表單元素，如非輸入項(xiàng)目或者單選按鈕的已選項(xiàng)目等元素，可用的2011-07-07
jQuery移動(dòng)web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實(shí)現(xiàn)
這篇文章主要介紹了jQuery移動(dòng)web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實(shí)現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12
Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能
這篇文章主要介紹了Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能,結(jié)合實(shí)例形式分析了jQuery的$.ajax方法與后臺(tái)php交互實(shí)現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02