资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js 静态HTML表格排序功能实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{background:#CCCCCC;cursor:pointer;} .up{background:#FFFFCC url(/upload/20090211095733175.gif) no-repeat right 5px;} .down{background:#FFFFCC url(/upload/20090211095734843.gif) no-repeat right 5px;} .hov{background:#F0EFE5;} </style> </head> <body> <table cellpadding="0" id="table"> <tr class="top"><td>kick me</td><td >kick me</td><td>kick me</td><td>kick me</td></tr> <tr> <td><span id="bfn_la_bac.usa">15.43</span></td> <td class="red">700</td> <td>1.220</td> <td class="red">阿</td> </tr> <tr><td><span id="bfn_la_c.usa">7.05</span></td> <td class="red">4</td> <td>3,000</td> <td class="red">炳</td> </tr> <tr><td><span id="bfn_la_jpm.usa">30.62</span></td> <td class="red">30</td> <td>2,558,800</td> <td class="red">和</td> </tr> <tr> <td><span id="bfn_la_axp.usa">22.30</span></td> <td class="red">5</td><td>6</td> <td class="red">瞎</td> </tr> <tr><td><span id="bfn_la_mrk.usa">26.31</span></td> <td class="red">0.6</td><td>5</td> <td class="red">-</td> </tr> <tr><td><span id="bfn_la_pg.usa">63.16</span></td> <td class="red">7</td><td>4</td> <td class="red">子</td> </tr> </table> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%0D%0Avar%20tableSort%20%3D%20function()%7B%20%0D%0Athis.initialize.apply(this%2Carguments)%3B%20%0D%0A%7D%20%0D%0A%0D%0AtableSort.prototype%20%3D%20%7B%20%0D%0A%0D%0Ainitialize%20%3A%20function(tableId%2CclickRow%2CstartRow%2CendRow%2CclassUp%2CclassDown%2CselectClass)%7B%20%0D%0Athis.Table%20%3D%20document.getElementById(tableId)%3B%20%0D%0Athis.rows%20%3D%20this.Table.rows%3B%2F%2F%E6%89%80%E6%9C%89%E8%A1%8C%20%0D%0Athis.Tags%20%3D%20this.rows%5BclickRow-1%5D.cells%3B%2F%2F%E6%A0%87%E7%AD%BEtd%20%0D%0Athis.up%20%3D%20classUp%3B%20%0D%0Athis.down%20%3D%20classDown%3B%20%0D%0Athis.startRow%20%3D%20startRow%3B%20%0D%0Athis.selectClass%20%3D%20selectClass%3B%20%0D%0Athis.endRow%20%3D%20(endRow%20%3D%3D%20999%3F%20this.rows.length%20%3A%20endRow)%3B%20%0D%0Athis.T2Arr%20%3D%20this._td2Array()%3B%2F%2F%E6%89%80%E6%9C%89%E5%8F%97%E5%BD%B1%E5%93%8D%E7%9A%84td%E7%9A%84%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%20%0D%0Athis.setShow()%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E6%A0%87%E7%AD%BE%E5%88%87%E6%8D%A2%20%0D%0AsetShow%3Afunction()%7B%20%0D%0Avar%20defaultClass%20%3D%20this.Tags%5B0%5D.className%3B%20%0D%0Afor(var%20Tag%20%2Ci%3D0%3BTag%20%3D%20this.Tags%5Bi%5D%3Bi%2B%2B)%7B%20%0D%0ATag.index%20%3D%20i%3B%20%0D%0AaddEventListener(Tag%20%2C'click'%2C%20Bind(Tag%2Cstatu))%3B%20%0D%0A%7D%20%0D%0Avar%20_this%20%3Dthis%3B%20%0D%0Avar%20turn%20%3D%200%3B%20%0D%0Afunction%20statu()%7B%20%0D%0Afor(var%20i%3D0%3Bi%3C_this.Tags.length%3Bi%2B%2B)%7B%20%0D%0A_this.Tags%5Bi%5D.className%20%3D%20defaultClass%3B%20%0D%0A%7D%20%0D%0Aif(turn%3D%3D0)%7B%20%0D%0AaddClass(this%2C_this.down)%20%0D%0A_this.startArray(0%2Cthis.index)%3B%20%0D%0Aturn%3D1%3B%20%0D%0A%7Delse%7B%20%0D%0AaddClass(this%2C_this.up)%20%0D%0A_this.startArray(1%2Cthis.index)%3B%20%0D%0Aturn%3D0%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%80%89%E4%B8%AD%E5%88%97%E6%A0%B7%E5%BC%8F%20%0D%0AcolClassSet%3Afunction(num%2Ccla)%7B%20%0D%0A%2F%2F%E5%BE%97%E5%88%B0%E5%85%B3%E8%81%94%E5%88%B0%E7%9A%84td%20%0D%0Afor(var%20i%3D%20(this.startRow-1)%3Bi%3C(this.endRow)%3Bi%2B%2B)%7B%20%0D%0Afor(var%20n%3D0%3Bn%3Cthis.rows%5Bi%5D.cells.length%3Bn%2B%2B)%7B%20%0D%0AremoveClass(this.rows%5Bi%5D.cells%5Bn%5D%2Ccla)%3B%20%0D%0A%7D%20%0D%0AaddClass(this.rows%5Bi%5D.cells%5Bnum%5D%2Ccla)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%BC%80%E5%A7%8B%E6%8E%92%E5%BA%8F%20num%20%E6%A0%B9%E6%8D%AE%E7%AC%AC%E5%87%A0%E5%88%97%E6%8E%92%E5%BA%8F%20aord%20%E9%80%86%E5%BA%8F%E8%BF%98%E6%98%AF%E9%A1%BA%E5%BA%8F%20%0D%0AstartArray%3Afunction(aord%2Cnum)%7B%20%0D%0Avar%20afterSort%20%3D%20this.sortMethod(this.T2Arr%2Caord%2Cnum)%3B%2F%2F%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%E4%BC%A0%E5%88%B0%E6%8E%92%E5%BA%8F%E6%96%B9%E6%B3%95%E4%B8%AD%E5%8E%BB%20%0D%0Athis.array2Td(num%2CafterSort)%3B%2F%2F%E8%BE%93%E5%87%BA%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%B0%86%E5%8F%97%E5%BD%B1%E5%93%8D%E7%9A%84%E8%A1%8C%E5%92%8C%E5%88%97%E8%BD%AC%E6%8D%A2%E6%88%90%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%20%0D%0A_td2Array%3Afunction()%7B%20%0D%0Avar%20arr%3D%5B%5D%3B%20%0D%0Afor(var%20i%3D(this.startRow-1)%2Cl%3D0%3Bi%3C(this.endRow)%3Bi%2B%2B%2Cl%2B%2B)%7B%20%0D%0Aarr%5Bl%5D%3D%5B%5D%3B%20%0D%0Afor(var%20n%3D0%3Bn%3Cthis.rows%5Bi%5D.cells.length%3Bn%2B%2B)%7B%20%0D%0Aarr%5Bl%5D.push(this.rows%5Bi%5D.cells%5Bn%5D.innerHTML)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20arr%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E6%A0%B9%E6%8D%AE%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%E6%9D%A5%E8%BE%93%E5%87%BA%E7%9B%B8%E5%BA%94%E7%9A%84%E8%A1%8C%E5%92%8C%E5%88%97%E7%9A%84%20innerHTML%20%0D%0Aarray2Td%3Afunction(num%2Carr)%7B%20%0D%0Athis.colClassSet(num%2Cthis.selectClass)%3B%20%0D%0Afor(var%20i%3D%20(this.startRow-1)%2Cl%3D0%3Bi%3C(this.endRow)%3Bi%2B%2B%2Cl%2B%2B)%7B%20%0D%0Afor(var%20n%3D0%3Bn%3Cthis.Tags.length%3Bn%2B%2B)%7B%20%0D%0Athis.rows%5Bi%5D.cells%5Bn%5D.innerHTML%20%3D%20arr%5Bl%5D%5Bn%5D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E4%BC%A0%E8%BF%9B%E6%9D%A5%E4%B8%80%E4%B8%AA%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%EF%BC%8C%E6%A0%B9%E6%8D%AE%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%E7%9A%84%E5%AD%90%E9%A1%B9%E4%B8%AD%E7%9A%84w%E9%A1%B9%E6%8E%92%E5%BA%8F%EF%BC%8C%E5%86%8D%E8%BF%94%E5%9B%9E%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%20%0D%0AsortMethod%3Afunction(arr%2Caord%2Cw)%7B%20%0D%0A%2F%2Fvar%20effectCol%20%3D%20this.getColByNum(whichCol)%3B%20%0D%0Aarr.sort(function(a%2Cb)%7B%20%0D%0Ax%20%3D%20killHTML(a%5Bw%5D)%3B%20%0D%0Ay%20%3D%20killHTML(b%5Bw%5D)%3B%20%0D%0Ax%20%3D%20x.replace(%2F%2C%2Fg%2C'')%3B%20%0D%0Ay%20%3D%20y.replace(%2F%2C%2Fg%2C'')%3B%20%0D%0Aswitch%20(isNaN(x))%7B%20%0D%0Acase%20false%3A%20%0D%0Areturn%20Number(x)%20-%20Number(y)%3B%20%0D%0Abreak%3B%20%0D%0Acase%20true%3A%20%0D%0Areturn%20x.localeCompare(y)%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0Aarr%20%3D%20aord%3D%3D0%3Farr%3Aarr.reverse()%3B%20%0D%0Areturn%20arr%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F*-----------------------------------*%2F%20%0D%0Afunction%20addEventListener(o%2Ctype%2Cfn)%7B%20%0D%0Aif(o.attachEvent)%7Bo.attachEvent('on'%2Btype%2Cfn)%7D%20%0D%0Aelse%20if(o.addEventListener)%7Bo.addEventListener(type%2Cfn%2Cfalse)%7D%20%0D%0Aelse%7Bo%5B'on'%2Btype%5D%20%3D%20fn%3B%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20hasClass(element%2C%20className)%20%7B%20%0D%0Avar%20reg%20%3D%20new%20RegExp('(%5C%5Cs%7C%5E)'%2BclassName%2B'(%5C%5Cs%7C%24)')%3B%20%0D%0Areturn%20element.className.match(reg)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20addClass(element%2C%20className)%20%7B%20%0D%0Aif%20(!this.hasClass(element%2C%20className))%20%0D%0A%7B%20%0D%0Aelement.className%20%2B%3D%20%22%20%22%2BclassName%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20removeClass(element%2C%20className)%20%7B%20%0D%0Aif%20(hasClass(element%2C%20className))%20%7B%20%0D%0Avar%20reg%20%3D%20new%20RegExp('(%5C%5Cs%7C%5E)'%2BclassName%2B'(%5C%5Cs%7C%24)')%3B%20%0D%0Aelement.className%20%3D%20element.className.replace(reg%2C'%20')%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20Bind%20%3D%20function(object%2C%20fun)%20%7B%20%0D%0Areturn%20function()%20%7B%20%0D%0Areturn%20fun.apply(object%2C%20arguments)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E5%8E%BB%E6%8E%89%E6%89%80%E6%9C%89%E7%9A%84html%E6%A0%87%E8%AE%B0%20%0D%0Afunction%20killHTML(str)%7B%20%0D%0Areturn%20str.replace(%2F%3C%5B%5E%3E%5D%2B%3E%2Fg%2C%22%22)%3B%20%0D%0A%7D%20%0D%0A%2F%2F------------------------------------------------%20%0D%0A%2F%2Ftableid%20%E7%AC%AC%E5%87%A0%E8%A1%8C%E6%98%AF%E6%A0%87%E7%AD%BE%E8%A1%8C%EF%BC%8C%E4%BB%8E%E7%AC%AC%E5%87%A0%E8%A1%8C%E5%BC%80%E5%A7%8B%E6%8E%92%E5%BA%8F%EF%BC%8C%E7%AC%AC%E5%87%A0%E8%A1%8C%E7%BB%93%E6%9D%9F%E6%8E%92%E5%BA%8F(999%E8%A1%A8%E7%A4%BA%E6%9C%80%E5%90%8E)%20%E5%8D%87%E5%BA%8F%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%EF%BC%8C%E9%99%8D%E5%BA%8F%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%20%E9%80%89%E4%B8%AD%E5%88%97%E6%A0%B7%E5%BC%8F%20%0D%0A%2F%2F%E6%B3%A8%E6%84%8F%E6%A0%87%E7%AD%BE%E8%A1%8C%E7%9A%84class%E5%BA%94%E8%AF%A5%E6%98%AF%E4%B8%80%E8%87%B4%E7%9A%84%20%0D%0Avar%20ex1%20%3D%20new%20tableSort('table'%2C1%2C2%2C999%2C'up'%2C'down'%2C'hov')%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程