首頁 JS特效 jQuery特效 jQuery表格資料條件篩選程式碼

jQuery表格資料條件篩選程式碼

jQuery表格資料條件篩選程式碼

jQuery表格資料條件篩選程式碼

程式碼片段:

js程式碼

<script type="text/javascript">
$(function(){
//要綁定的表格類別名
var choosetable=".choosetable";

var checkarray=[];
//循環遍歷table的th加入篩選清單中
$(choosetable+" th").each(function(){
checkarray.push($(this).text());
});
for (var i = 0; i < checkarray.length/3; i++) {
if(i<checkarray.length/3-1||checkarray.length%3==0){
var checktext="";
for (var j = 0; j < 3; j++) {
checktext+="<div class='choosediv'><label class='checkbox'><input type='checkbox' checked value='"+((i*3)+j)+"'> ; "+checkarray[((i*3)+j)]+" </label> </div>";
}
}else{
var checktext="";
for (var j = 0; j <checkarray.length%3; j++) {
checktext+="<div class='choosediv'><label class='checkbox'><input type='checkbox' checked value='"+((i*3)+j)+"'> ; "+checkarray[((i*3)+j)]+" </label> </div>";
}
 }
 $(".modal-body").append("<div class='chooses'>"+checktext+"</div>");
}

$("#choosebtn").click(function(){
var choosearr=[];
$(".checkbox input").each(function(){
//alert($(this).is(":checked"));
if(!$(this).is(":checked")){
choosearr.push($(this).val());
}
})
//alert(choosearr);
$(choosetable+" tr").each(function(){
$(this).children().show();
});
for(var i=0;i<choosearr.length;i++){

$(choosetable+" tr").each(function(){
$(this).children().eq(choosearr[i]).hide();
});
			
}
});
//全選/全不選
$("#allchecked").click(function(){
if(this.checked){
$(".checkbox input").prop("checked", true);
}else{
$(".checkbox input").prop("checked", false);
}
});
})

</script>

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

jquery實作多條件篩選特效程式碼分享_jquery jquery實作多條件篩選特效程式碼分享_jquery

16 May 2016

這篇文章主要介紹了jquery實現多條件篩選特效,推薦給大家,有需要的小夥伴可以參考下。

JavaScript前端資料多條件篩選功能實作程式碼 JavaScript前端資料多條件篩選功能實作程式碼

01 Feb 2018

有時候也會需要在前端進行資料篩選,增強互動體驗。當資料可用的篩選條件較多時,把邏輯寫死會為後期維護帶來很*煩。以下是我自己寫的一個簡單的篩選器,篩選條件可以根據資料包含的欄位動態設定。

如何透過Vue和Excel實現表格資料的多條件篩選 如何透過Vue和Excel實現表格資料的多條件篩選

20 Jul 2023

如何透過Vue和Excel實現表格資料的多條件篩選隨著資料的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的資料。在Vue和Excel的幫助下,我們可以輕鬆實現這項功能。首先,我們需要在Vue中引入Excel文件,並將其轉換為可操作的資料格式。這可以透過使用papaparse庫來實現。以下是引入和轉換Excel檔案的程式碼範例:&lt

jquery表格內容篩選實作想法及程式碼_jquery jquery表格內容篩選實作想法及程式碼_jquery

16 May 2016

基於jquery實現表格內容篩選,本文採用兩種方式實現,有興趣的朋友可以參考下哈,希望對你學習jquery篩選有所幫助

JQuery取得表格資料範例程式碼_jquery JQuery取得表格資料範例程式碼_jquery

16 May 2016

這篇文章主要介紹了透過JQuery如何取得表格數據,以下有個不錯的範例,大家可以參考下

Js表格萬條資料瞬間載入實作程式碼_javascript技巧 Js表格萬條資料瞬間載入實作程式碼_javascript技巧

16 May 2016

一條數據創建一行,如果數量大的時候,一次性要加載完數據的話,瀏覽器就會卡上半天,下面有個不錯的方法,大家可以參考下

asp.net跨資料庫多表聯合動態條件查詢的程式碼範例 asp.net跨資料庫多表聯合動態條件查詢的程式碼範例

04 May 2017

這篇文章主要介紹了asp.net實現的MVC跨數據庫多表聯合動態條件查詢功能,結合實例形式較為詳細分析了asp.net基於MVC架構的跨數據庫多表聯合查詢功能實現技巧,需要的朋友可以參考下

jquery ajax如何將後台資料傳回給前台表格實例程式碼詳解 jquery ajax如何將後台資料傳回給前台表格實例程式碼詳解

22 Jul 2017

實現過程是這樣的:前台通過jquery的ajax調用一般處理程序(Handler),獲取表格需要顯示的信息,然後轉換成json格式返回給前台,前台獲取到數據後循環構建表格的行,最好把行附加到表裡。 目標:   a 熟悉簡單JQuery Ajax的使用

如何使用jquery對表格資料進行增加、儲存、刪除操作程式碼詳解 如何使用jquery對表格資料進行增加、儲存、刪除操作程式碼詳解

22 Jul 2017

我們往往不是透過提交表單來處理這些數據,因為如果在後台去遍歷處理這些大量的數據是非常繁瑣的;比較好的做法是在前台頁面中將數據以對象形式保存在json中,然後在後台直接將json轉換成我們需要的對象,這樣我們的直接可以處理對象了!

See all articles See all articles

Hot Tools

jQuery2019情人節表白放煙火動畫特效

jQuery2019情人節表白放煙火動畫特效

一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

520情人節表白網頁動畫特效

520情人節表白網頁動畫特效

jQuery情人節表白動畫、520表白背景動畫

酷炫的系統登入頁

酷炫的系統登入頁

酷炫的系統登入頁

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

Hot Article