本文实例讲述了JavaScript对表格或元素按文本,数字或日期排序的方法。分享给大家供大家参考。具体实现方法如下:
// 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, childTag, colTag, colIndex, dateMask); and // AddSortByNumber2(parentEl, childTag, colTag, 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 <td sort="2012/12/20"> will still sort a // cell correctly. (This format 'YYYY/MM/DD' will be converted into a Date() object.) var MonthNames = ["January", "February", "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", "May", "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, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) AddEvent = function (elem, eventType, func) { elem.attachEvent('on' + eventType, func); }; else AddEvent = function (elem, eventType, func) { elem['on' + eventType] = func; }; AddEvent(elem, eventType, func); }; // Sort methods/algorithms attributed: var SortTable = function (tbl, col) { // could be called directly SortElements(tbl, 'tr', 'td', col); }; var SortElements = function (parentEl, childTag, colTag, colIndex) { // example use: SortElements('table1','tr','td',2) // or SortElements('list1','li') // or SortElements('divName','p','span',3) var i, j, cTags = {}, startAt = 0, childLen, aChild, elem, sortBy, content, elems = [], sortedLen, frag, hdrsLen, hdr; var parent = (typeof parentEl === 'string') "Click to sort" if ( !hdrs[j].title ) hdrs[j].setAttribute('title', 'Click to sort'); } } } } }; var AddSortByDate = function (tbl, col, 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') "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, assuming it is a header row var i, rLen, cell, tempNum; while ( col.length ) AddSortByNumber(tbl,col.pop()); if ((col instanceof Array) || isNaN(col)) return; tbl = (typeof tbl === 'string') "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]*', 'gi'),''); 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, function($0, $1, $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, function($0, $1, $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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“JavaScript对表格或元素按文本,数字或日期排序的方法”评论...