HTML中利用堆栈方式对Table进行行排序

类别:网站制作 点击:0 评论:0 推荐:

代码如下:
<!-- all rights by Lonsan on 2005 email:[email protected] --> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=gb2312"> <title>HTML中利用堆栈方式对Table进行行排序</title> <style> body,table {}{}{}{ font-size:9pt; } .grid {}{}{}{ border:1 solid #6666FF; width:460; } .grid tr {}{}{}{ cursor:hand; } .grid td {}{}{}{ border:1 solid #6666FF; } </style> <script language="javascript"> <!-- function select(tr) { if(grid.selectedTr!=null) { grid.selectedTr.style.backgroundColor=""; } grid.selectedTr=tr; tr.style.backgroundColor="#FFCC00"; } function isselected() { if(grid.selectedTr==null) return false; return true; } function push(s) { if(grid.stack==null) grid.stack=[]; grid.stack.push(s); } function pop() { if(grid.stack==null) return null; return grid.stack.pop(); } function movetop() { if(!isselected()) return; var s=[]; s.push(grid.selectedTr.rowIndex); s.push(0); push(s); grid.moveRow(grid.selectedTr.rowIndex, 0); } function moveup() { if(!isselected()) return; var s=[]; s.push(grid.selectedTr.rowIndex); s.push(Math.max(grid.selectedTr.rowIndex-1,0)); push(s); grid.moveRow(grid.selectedTr.rowIndex, Math.max(grid.selectedTr.rowIndex-1,0)); } function movedown() { if(!isselected()) return; var s=[]; s.push(grid.selectedTr.rowIndex); s.push(Math.min(grid.selectedTr.rowIndex+1,grid.rows.length-1)); push(s); grid.moveRow(grid.selectedTr.rowIndex, Math.min(grid.selectedTr.rowIndex+1,grid.rows.length-1)); } function movebottom() { if(!isselected()) return; var s=[]; s.push(grid.selectedTr.rowIndex); s.push(grid.rows.length-1); push(s); grid.moveRow(grid.selectedTr.rowIndex, grid.rows.length-1); } function cancelmove() { if(grid.stack==null || grid.stack.length==0) return; var s=pop(); if(s!=null) { select(grid.rows[s[1]]); grid.moveRow(s[1],s[0]); } } function cancelall() { if(grid.stack!=null && grid.stack.length>0) { cancelmove(); window.setTimeout(cancelall, 2000); } else if(grid.stack!=null) { alert("over!!!"); } } //--> </script> </head> <body> <table id="grid" class="grid"> <tr onclick="select(this);"> <td>1</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>2</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>3</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>4</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>5</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>6</td> <td>[email protected]</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> </table> <br> <a href="javascript:movetop();">Top</a> <a href="javascript:moveup();">Up</a> <a href="javascript:movedown();">Down</a> <a href="javascript:movebottom();">Bottom</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="javascript:cancelmove();">Cancel</a> <a href="javascript:cancelall();">CancelAll</a> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]

转自: http://www.cnblogs.com/Lonsan/archive/2005/04/09/table.html

本文地址:http://com.8s8s.com/it/it30681.htm