線上服務咨詢
Article/文章
記錄成長點滴 分享您我感悟
使用js
發表時間:2019-07-30 16:18:57
文章來源:沈陽軟件開發
標簽:網站建設 小程序開發 小程序制作 微信小程序開發 公眾號開發 微信公眾號開發 網頁設計 網站優化 網站排名 網站設計 微信小程序設計 小程序定制 微信小程序定制
瀏覽次數:0
對html表進行排序 在web前端開發中會遇到排序等功能,當然你也可以使用服務器進行排序,今天我做了一個注釋,如何用js來實現這些復雜的功能。
在學習之前,你必須使用html dom jquery的知識。如果你無法理解它,當然,這不是天才。哈哈!
好吧,讓我先談談這個想法。在這里,當考慮js特效時,這個想法非常重要。你可以說你不必精通js,但功能在你面前,你必須有一個非常明確的想法。這很容易做到這一點,即使這是一個很難的特效!
有四個步驟:首先,向觸發排序的控件添加一個事件,我在這里跳過。
1.把要排序的內容添加到數組里
Var tIndex=parseInt($(this).index());
Var valueArray=new Array();
Var p=0;
For(var i=1; i< $('table tr')。length; i ++){
如果(tIndex!=0){
valueArray [p]=parseInt($('table tr: eq('+ i +')td')。eq(tIndex).html());
}否則{
valueArray [p]=$('table tr: eq('+ i +')td')。eq(tIndex).html();
}
的p ++;
}
2.數據排序
//數據排序
如果(PK==1){
valueArray.sort(function(a,b){return a
PK=2
}否則{
valueArray.sort(function(a,b){return a> b?-1: 1})
PK=1
}
3.匹配內容 加入到一個隱藏的排序div里
對于(var i=0; i;>
對于(var d=1; d< $('table tr')。length; d ++){
Var valueText=tIndex!=0? parseInt($('table tr: eq('+ d +')td')。eq(tIndex).html()): $('table tr: eq('+ d +')Td')。eq(tIndex) html的();
如果(valueArray [I]==valueText){
$('table tr')。eq(d).clone()。appendTo('。none')
}
}
}
4.重新整理html 排序,添加到視圖里
Var titleClone=$('table tr')。eq(0).clone(true);$( '表')的html( '')附加(titleClone);
$( '表')。追加($( '無')。HTML())
$( '無 ')的html('');
通過這四個步驟,您可以實現排序js的功能。這很簡單嗎?您也可以使用此示例來發揮作用。這取決于每個人的想象力。
姓名年齡出生年份分數何白(L)15198899王毅(W)252000150林明(L)181745120何潔(L)201996130特效:kevn-web front development label:& nbsp& nbsp沈陽Marketing type 網站建設& nbsp沈陽網站建設& nbsp沈陽app開發&營銷類型網站建設網站建設,小程序開發,小程序制作,微信小程序開發,公眾號開發,微信公眾號開發,網頁設計,網站優化,網站排名,網站設計,微信小程序設計,小程序定制,微信小程序定制