表格排序技巧

[入库:2005年8月18日] [更新:2007年3月24日]

本文简介:选择自 net_lover 的 blog

表格排序的方法

 代码如下:

<html> <head> <script> function table (tbody, thead) { this.tbody = tbody; this.thead = thead.constructor == array ? thead : new array(); this.view = null; } function table_sort (compfun, col) { compfun = compfun || comprows; compfun.col = col ? col : 0; this.tbody.sort(compfun); if (this.view) this.view.update(); } table.prototype.sort = table_sort; function comprows (row1, row2) { var sortcol = comprows.col; var value1 = row1[sortcol]; var value2 = row2[sortcol]; return value1 < value2 ? -1 : value1 == value2 ? 0 : 1; } function comprowsnum (row1, row2) { var sortcol = comprowsnum.col; var value1 = parsefloat(row1[sortcol]); var value2 = parsefloat(row2[sortcol]); return value1 < value2 ? -1 : value1 == value2 ? 0 : 1; } function tableview (model, left, top) { this.id = tableview.cnt; tableview.views[tableview.cnt++] = this; this.model = model; this.model.view = this; this.left = left || 0; this.top = top || 0; this.writelayer(); } function tableview_writelayer () { var html = ''; html += '<style>'; html += '#tableview' + this.id + ' {'; html += ' position: absolute;'; html += ' left: ' + this.left + 'px;'; html += ' top: ' + this.top + 'px'; html += '}'; html += '<\/style>'; html += '<div id="tableview' + this.id + '"'; html += '>'; html += this.gethtml(this.model); html += '<\/div>'; document.write(html); if (document.all) this.layer = document.all['tableview' + this.id]; else if (document.layers) this.layer = document['tableview' + this.id]; else if (document.getelementbyid) this.layer = document.getelementbyid('tableview' + this.id); } tableview.prototype.writelayer = tableview_writelayer; function tableview_update () { var html = this.gethtml(); if (document.layers) { if (!this.layer) this.layer = document['tableview' + this.id]; this.layer.document.open(); this.layer.document.write(html); this.layer.document.close(); } else if (document.all) this.layer.innerhtml = html; else if (document.createrange) { var r = document.createrange(); if (!this.layer) this.layer = document.getelementbyid('tableview' + this.id); while (this.layer.haschildnodes()) this.layer.removechild(this.layer.lastchild); r.setstartafter(this.layer); var docfrag = r.createcontextualfragment(html); this.layer.appendchild(docfrag); } } tableview.prototype.update = tableview_update; function tableview_gethtml () { var thead = this.model.thead; var rows = this.model.tbody; var html = ''; html += '<table border=1>'; for (var r = 0; r < thead.length; r++) { html += '<tr>'; for (var c = 0; c < thead[r].length; c++) { html += '<th>' html += thead[r][c]; html += '<\/th>'; } html += '<\/tr>'; } for (var r = 0; r < rows.length; r++) { html += '<tr>'; for (var c = 0; c < rows[r].length; c++) { html += '<td>' html += rows[r][c]; html += '<\/td>'; } html += '<\/tr>'; } html += '<\/table>'; return html; } tableview.prototype.gethtml = tableview_gethtml; tableview.cnt = 0; tableview.views = new array(); </script> <script> var thead = [ [ '<a href="javascript: void 0" onclick="table1.sort(); ' + 'return false;">姓名<\/a>', '<a href="javascript: void 0" onclick="table1.sort(null, 1); ' + 'return false;">课程<\/a>', '<a href="javascript: void 0" onclick="table1.sort(comprowsnum, 2);' + ' return false;">分数<\/a>']]; var tbody = [['meng', '语文', 100], ['孟子', '外语', 99], ['小孟', '数学', 300] ]; var table1 = new table(tbody, thead); var table1view; </script> </head> <body> <script> table1view = new tableview (table1, 100, 100); </script> </body> </html>

本文关键:sort,table,javascript
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top