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

最新推荐文章于 2024-01-02 15:19:42 发布

原创最新推荐文章于 2024-01-02 15:19:42 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #html #javascript #function #null #border

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

该博客展示了在HTML中利用堆栈方式对Table进行行排序的代码。通过JavaScript编写多个函数，如select、push、pop等，实现了表格行的选择、上移、下移、置顶、置底以及撤销移动等操作，还给出了表格的样式设置和HTML结构。

代码如下：
 <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">  </script> </head> <body> <table id="grid" class="grid"> <tr onclick="select(this);"> <td>1</td> <td>Lonsan21@163.com</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>2</td> <td>Lonsan21@163.com</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>3</td> <td>Lonsan21@163.com</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>4</td> <td>Lonsan21@163.com</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>5</td> <td>Lonsan21@163.com</td> <td>蓝山</td> <td>Asp.Net</td> <td>JS</td> </tr> <tr onclick="select(this);"> <td>6</td> <td>Lonsan21@163.com</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>        <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