線上服務(wù)咨詢
Article/文章
記錄成長點(diǎn)滴 分享您我感悟
您當(dāng)前位置>首頁 > 知識 > 網(wǎng)站建設(shè)
使用js
發(fā)表時間:2019-07-30 16:18:57
文章來源:沈陽軟件開發(fā)
標(biāo)簽:網(wǎng)站建設(shè) 小程序開發(fā) 小程序制作 微信小程序開發(fā) 公眾號開發(fā) 微信公眾號開發(fā) 網(wǎng)頁設(shè)計 網(wǎng)站優(yōu)化 網(wǎng)站排名 網(wǎng)站設(shè)計 微信小程序設(shè)計 小程序定制 微信小程序定制
瀏覽次數(shù):0
對html表進(jìn)行排序 在web前端開發(fā)中會遇到排序等功能,當(dāng)然你也可以使用服務(wù)器進(jìn)行排序,今天我做了一個注釋,如何用js來實(shí)現(xiàn)這些復(fù)雜的功能。
在學(xué)習(xí)之前,你必須使用html dom jquery的知識。如果你無法理解它,當(dāng)然,這不是天才。哈哈!
好吧,讓我先談?wù)勥@個想法。在這里,當(dāng)考慮js特效時,這個想法非常重要。你可以說你不必精通js,但功能在你面前,你必須有一個非常明確的想法。這很容易做到這一點(diǎn),即使這是一個很難的特效!
有四個步驟:首先,向觸發(fā)排序的控件添加一個事件,我在這里跳過。
1.把要排序的內(nèi)容添加到數(shù)組里
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.數(shù)據(jù)排序
//數(shù)據(jù)排序
如果(PK==1){
valueArray.sort(function(a,b){return a
PK=2
}否則{
valueArray.sort(function(a,b){return a> b?-1: 1})
PK=1
}
3.匹配內(nèi)容 加入到一個隱藏的排序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('');
通過這四個步驟,您可以實(shí)現(xiàn)排序js的功能。這很簡單嗎?您也可以使用此示例來發(fā)揮作用。這取決于每個人的想象力。
姓名年齡出生年份分?jǐn)?shù)何白(L)15198899王毅(W)252000150林明(L)181745120何潔(L)201996130特效:kevn-web front development label:& nbsp& nbsp沈陽Marketing type 網(wǎng)站建設(shè)& nbsp沈陽網(wǎng)站建設(shè)& nbsp沈陽app開發(fā)&營銷類型網(wǎng)站建設(shè)網(wǎng)站建設(shè),小程序開發(fā),小程序制作,微信小程序開發(fā),公眾號開發(fā),微信公眾號開發(fā),網(wǎng)頁設(shè)計,網(wǎng)站優(yōu)化,網(wǎng)站排名,網(wǎng)站設(shè)計,微信小程序設(shè)計,小程序定制,微信小程序定制