本文实例讲述了JavaScript对表格或元素按文本，数字或日期排序的方法。分享给大家供大家参考。具体实现方法如下：
rush:js;">
// Sorting table columns correctly by text,number or date. There are other
// versions,plugins,etc.,for this but they either are restricted to specific
// date formats,or require EVERY row-element to be given a sort attribute; mine
// can handle many different date and number formats,and even allows for specific
// cells that may not conform to the overall date/number format for that column.
// My version also enables sorting of element hierarchies: such as a DIV containing
// P-paragraphs and SPANs - this Could even be an image-gallery containing prices
// or dates within spans. Very efficient as well!!
// Example: andrew.dx.am/sortgallerydel.html
// AddSortToTables(); will make the table headers clickable,to sort columns in
// ascending or descending order,for any tables with class="sortIt".
// SortTable(tbl,col); will sort the table (tbl is an id or table object) by
// the supplied column index (indexed from 0) in ascending or descending order.
// AddSortByDate(tbl,col,dateMask); enables sorting of a column by date,// specified by a date-mask such as 'dd-mmm-yy'.
// AddSortByNumber(tbl,col); enables sorting of a column by number. This assumes a
// period . as the decimal separator (if present); it ignores any other non-numeric
// characters.
// SortElements(parentEl,childTag,colTag,colIndex); will sort (non-table)
// elements in ascending or descending order. For example,an UL containing LIs
// and SPANs. colIndex specifies which span to sort; there may be more than one in
// the LI (0 indexed).
// Example: SortElements('divid','p','span',2);
// 3rd span within each paragraph.
//
// AddSortByDate2(parentEl,colIndex,dateMask); and
// AddSortByNumber2(parentEl,colIndex)
// provide the same feature-set as AddSortByDate and AddSortByNumber does
// for tables,but for element hierarchies.
// If there are dates or numbers in a column (or element) which don't meet the
// date-mask or number formatting necessary to sort correctly,then these individual
// elements can be given the attribute "sort" and they will still sort correctly!
// For example,with a date column march","April","May","June","July","August","September","October","November","December"];
var DayNames = [ "Sunday","Monday","Tueday","Wednesday","Thursday","Friday","Saturday" ];
var ShortMths = ["Jan","Feb","Mar","Apr","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var ShortDays = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var AddEvent = function (elem,eventType,func) {
// Helper function.
if ( elem.addEventListener )
AddEvent = function (elem,func) {
elem.addEventListener(eventType,func,false);
};
else if ( elem.attachEvent )
AddEvent = function (elem,func) {
elem.attachEvent('on' + eventType,func);
};
else
AddEvent = function (elem,func) {
elem['on' + eventType] = func;
};
AddEvent(elem,func);
};
// Sort methods/algorithms attributed:
var SortTable = function (tbl,col) {
// Could be called directly
SortElements(tbl,'tr','td',col);
};
var SortElements = function (parentEl,colIndex) {
// example use: SortElements('table1',2)
// or SortElements('list1','li')
// or SortElements('divName',3)
var i,j,cTags = {},startAt = 0,childLen,aChild,elem,sortBy,content,elems = [],sortedLen,frag,hdrsLen,hdr;
var parent = (typeof parentEl === 'string') ?
document.getElementById(parentEl) : parentEl;
var AscText = function (a,b) { // sort() by .data as text
var x = a.data,y = b.data,xnum = parseFloat(x),yNum = parseFloat(y);
// check if each begin with a number..
if ( !isNaN(xnum) && !isNaN(yNum) && (xnum - yNum) )
return xnum - yNum;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
var DescText = function (a,b) { // sort() by .data
var x = a.data,yNum = parseFloat(y);
// check if each begin with a number..
if ( !isNaN(xnum) && !isNaN(yNum) && (yNum - xnum) )
return yNum - xnum;
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
};
var AscNum = function (a,b) { // used with dates as well
return a.data - b.data;
};
var DescNum = function (a,b) {
return b.data - a.data;
};
if (parent.nodeName.toLowerCase() == 'table') {
if ( childTag == 'tr' ) {
sortBy = parent.rows[0].cells[colIndex].sortBy || 'text';
}
parent = parent.tBodies[0] || parent;
if ( parent.rows[0].cells[0].nodeName.toLowerCase() == 'th' ) {
startAt = 1;
}
}
cTags = parent.getElementsByTagName(childTag);
if ( typeof colIndex == 'undefined' ) {
sortBy = 'text'; // sort simple lists or paragraphs as text
}
for (i = startAt,childLen = cTags.length; i < childLen; i++) {
// ..go forward examining each child
aChild = cTags[i];
elem = (colTag) ? aChild.getElementsByTagName(colTag)[colIndex] : aChild;
if (elem) {
if ( !sortBy ) { // sorting non-table columns..
sortBy = (typeof elem.numberValue != 'undefined') ? 'number' :
((typeof elem.dateValue != 'undefined') ? 'date' : 'text');
}
switch (sortBy) {
// You can supply 'sort' attributes to enable sorting of numbers,etc.
// For example, for a date.
case 'text':
content = (elem.getAttribute('sort') ||
elem.firstChild.nodeValue).toLowerCase();
break;
case 'number':
content = elem.numberValue;
break;
case 'date':
content = elem.dateValue;
break;
default:
content = (elem.getAttribute('sort') ||
elem.firstChild.nodeValue).toLowerCase();
break;
}
j = elems.length;
if ( !aChild.id )
aChild.id = 'tempSortID' + j;
elems[j] = { data: content,tempID: aChild.id };
}
}
// The following will determine if the table/etc has already been sorted
// by the same column or tag. If so,it will sort in ascending or descending
// order. It creates custom element properties to the parent element to
// remember the prevIoUs sort details.
if ( typeof colIndex == 'undefined' ) colIndex = 0;
if ( parent.prevTag && parent.prevTag == ((typeof colTag == 'undefined') ?
childTag : colTag) ) {
if (parent.prevCol == colIndex) {
// sorting by the same column as prevIoUsly
parent.prevSort = (parent.prevSort == 'asc') ? 'desc' : 'asc';
} else { // sorting by any other column
parent.prevCol = colIndex;
parent.prevSort = 'asc';
}
} else {
// sorting for the 1st time or by a different tag
parent.prevTag = ((typeof colTag == 'undefined') ? childTag : colTag);
parent.prevCol = colIndex;
parent.prevSort = 'asc';
}
if ( parent.prevSort === 'desc' ) {
// 'desc' WILL BE the prevIoUs sort order..
switch (sortBy) {
case 'text': elems.sort(DescText); break;
case 'number': elems.sort(DescNum); break;
case 'date': elems.sort(DescNum); break;
default: elems.sort(DescText); break;
}
} else {
switch (sortBy) {
case 'text': elems.sort(AscText); break;
case 'number': elems.sort(AscNum); break;
case 'date': elems.sort(AscNum); break;
default: elems.sort(AscText); break;
}
}
frag = document.createDocumentFragment();
for (i = 0,sortedLen = elems.length; i < sortedLen; i++) {
elem = document.getElementById(elems[i].tempID);
frag.appendChild(elem);
if ( (elem.id).substr(0,10) == 'tempSortID' )
elem.removeAttribute('id');
}
parent.appendChild(frag);
elems = null;
return parent.prevSort; // not currently used
};
var AddSortToTables = function () {
// ..if table has class-name 'sortIt'
var tables = document.getElementsByTagName('table'),i,tblLen,tbl,hdrs,hdrsLen;
function PreserveSortScope(a,b,c,d) {
return function () {
// assign the SortElements fn. to a table header
SortElements(a,d);
}
}
// add sorting to table headers
for ( i = 0,tblLen = tables.length; i < tblLen; i++ ) {
tbl = tables[i];
if ( tbl.className.indexOf('sortIt') + 1) {
hdrs = tbl.getElementsByTagName('th');
if ( hdrs ) {
for ( j = 0,hdrsLen = hdrs.length; j < hdrsLen; j++ ) {
AddEvent(hdrs[j],'click',PreserveSortScope(tbl,j));
// if there's no title already,add "Click to sort"
if ( !hdrs[j].title ) hdrs[j].setAttribute('title','Click to sort');
}
}
}
}
};
var AddSortByDate = function (tbl,dateMask) {
// Input: the table name (or object),a column index (or array)
// and a date mask ('dd-mmm-yy')
// Adds a sortBy = 'date' property to the first row
// will ignore the first row,assuming it is a header row
var i,rLen,cell;
while ( col.length ) AddSortByDate(tbl,col.pop(),dateMask);
if ((col instanceof Array) || isNaN(col)) return;
var tbl = (typeof tbl === 'string') ? document.getElementById(tbl) : tbl;
tbl.rows[0].cells[col].sortBy = 'date';
AddSortByDate2(tbl,dateMask);
};
var AddSortByDate2 = function (parentEl,dateMask) {
var kids,cell;
var parent = (typeof parentEl === 'string') ?
document.getElementById(parentEl) : parentEl;
if ( parent.nodeName.toLowerCase() == 'table' ) {
parent = parent.tBodies[0] || parent;
startAt = ( parent.rows[0].cells[0].nodeName.toLowerCase() == 'th' ) * 1;
}
kids = parent.getElementsByTagName(childTag);
for ( i = startAt,rLen = kids.length; i < rLen; i++) {
cell = kids[i].getElementsByTagName(colTag)[colIndex];
if (cell) {
if ( typeof cell.numberValue != 'undefined' ) delete cell.numberValue;
// the above enables switching from a number to a date sort
// (although v. unlikely)
if (cell.getAttribute('sort')) {
// use sort attribute if present
cell.dateValue = new Date(cell.getAttribute('sort'));
} else {
cell.dateValue = new Date(StringToDate(cell.firstChild.nodeValue,dateMask));
}
if (cell.dateValue.toString() == "NaN" || cell.dateValue.toString() ==
"Invalid Date") {
cell.dateValue = 0;
}
}
}
};
var AddSortByNumber = function (tbl,col) {
// col is a column index or array of indices
// will ignore the first row,cell,tempNum;
while ( col.length ) AddSortByNumber(tbl,col.pop());
if ((col instanceof Array) || isNaN(col)) return;
tbl = (typeof tbl === 'string') ? document.getElementById(tbl) : tbl;
tbl.rows[0].cells[col].sortBy = 'number';
AddSortByNumber2(tbl,col);
};
var AddSortByNumber2 = function (parentEl,colIndex) {
var kids,tempNum;
var parent = (typeof parentEl === 'string') ?
document.getElementById(parentEl) : parentEl;
if ( parent.nodeName.toLowerCase() == 'table' ) {
parent = parent.tBodies[0] || parent;
startAt = (parent.rows[0].cells[0].nodeName.toLowerCase() == 'th') * 1;
}
kids = parent.getElementsByTagName(childTag);
for (i = startAt,rLen = kids.length; i < rLen; i++) {
cell = kids[i].getElementsByTagName(colTag)[colIndex];
if (cell) {
if ( typeof cell.dateValue != 'undefined' ) delete cell.dateValue;
// the above enables switching from a date to a number sort
// (although v. unlikely)
tempNum = cell.getAttribute('sort') || cell.firstChild.nodeValue;
tempNum = tempNum.replace(/[^0-9.-]/g,'');
cell.numberValue = parseFloat(tempNum);
if (isNaN(cell.numberValue))
cell.numberValue = 0.0;
}
}
};
var StringToDate = function (sDate,sFormat,cutOff) {
// Input: a date value as a string,it's format as a string e.g. 'dd-mmm-yy'
// Optional: a cutoff (integer) for 2 digit years.
// If no 'd' appears in the format string then the 1st of the month is assumed.
// If the year is 20 and the cut-off is 30 then the value will be converted
// to 2020; if the year is 40 then this will be converted to 1940.
// If no cut-off is supplied then '20' will be pre-pended to the year (YY).
// Output: a string in the format 'YYYY/MM/DD' or ''
// Will not attempt to convert certain combinations e.g. DMM,MDD,DDM,YYYYD.
var sParsed,fndSingle;
// sParsed will be constructed in the format 'YYYY/MM/DD'
sDate = sDate.toString().toupperCase();
sFormat = sFormat.toupperCase();
if (sFormat.search(/MMMM|MMM/) + 1) { // replace Mar/march with 03,etc.
sDate = sDate.replace(new RegExp('(' + ShortMths.join('|') + ')[A-Z]*','gi'),function (m) {
var i = ShortMths.indexOf(m.charat(0).toupperCase() +
m.substr(1,2).toLowerCase()) + 1;
return ((i < 10) ? "0" + i : "" + i).toString();
});
sFormat = sFormat.replace(/MMMM|MMM/g,'MM');
}
if (sFormat.search(/DDDD|DDD/) + 1) { // replace Tue/Tuesday,etc. with ''
sDate = sDate.replace(new RegExp('(' + ShortDays.join('|') + ')[A-Z]*','');
sFormat = sFormat.replace(/DDDD|DDD/g,'');
}
sDate = sDate.replace(/(^|\D)(\d)(?=\D|$)/g,function($0,$1,$2) {
// single digits 2 with 02
return $1 + '0' + $2;
});
sFormat = sFormat.replace(/(^|[^DMY])(D|M)(?=[^DMY]|$)/g,$2){
return $1 + $2 + $2; // replace D or M with DD and MM
});
// are there still single Ds or Ms?
fndSingle = sFormat.search(/(^|[^D])D([^D]|$)|(^|[^M])M([^M]|$)/)+1;
if ( fndSingle ) return ''; // do not attempt to parse,for example,'DMM'
sFormat = sFormat.replace(/(^|[^Y])(YY)(?=[^Y]|$)/g,$2,index) {
var tempDate = sDate.substr(0,index + 1);
tempDate += (cutOff) ? ((parseInt(sDate.substr(index + 1,2),10) > cutOff) ?
'19' : '20') : '20';
tempDate += sDate.substr(index + 1);
sDate = tempDate;
return $1 + $2 + $2;
});
sParsed = ('YYYY/MM/DD').replace(/YYYY|MM|DD/g,function(m){
return (sFormat.indexOf(m) + 1) ?
sDate.substr(sFormat.indexOf(m),m.length) : '';
});
if (sParsed.charat(0) == '/') {
// if no year specified,assume the current year
sParsed = (new Date().getFullYear()) + sParsed;
}
if (sParsed.charat(sParsed.length - 1) == '/') {
// if no date,assume the 1st of the month
sParsed += '01';
}
// should end up with 10 characters..
return ( sParsed.length == 10 ) ? sParsed : '';
};
希望本文所述对大家的javascript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
