时间:2021-07-01 10:21:17 帮助过:11人阅读
本文实例讲述了JS实现的点击表头排序功能。分享给大家供大家参考,具体如下:
运行效果:
1、index.html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jb51.net点击表头排序</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="tablesort.js"></script> <link type="text/css" rel="StyleSheet" href="tablesort.css" rel="external nofollow" /> <style type="text/css"> body { font-family: Verdana, Helvetica, Arial, Sans-Serif; font: Message-Box; } code { font-size: 1em; } </style> </head> <body> <table id="MyHeadTab" cellspacing="0" onclick="sortColumn(event)"> <thead> <tr> <td>String</td> <td title="CaseInsensitiveString">String</td> <td>Number</td> <td>Date</td> <td>No Sort</td> </tr> </thead> <tbody> <tr> <td>apple</td> <td>Strawberry</td> <td>45</td> <td>2001-03-13</td> <td>Item 0</td> </tr> <tr> <td>Banana</td> <td>orange</td> <td>7698</td> <td>1789-07-14</td> <td>Item 1</td> </tr> <tr> <td>orange</td> <td>Banana</td> <td>4546</td> <td>1949-07-04</td> <td>Item 2</td> </tr> <tr> <td>Strawberry</td> <td>apple</td> <td>987</td> <td>1975-08-19</td> <td>Item 3</td> </tr> <tr> <td>Pear</td> <td>blueberry</td> <td>98743</td> <td>2001-01-01</td> <td>Item 4</td> </tr> <tr> <td>blueberry</td> <td>Pear</td> <td>4</td> <td>2001-04-18</td> <td>Item 5</td> </tr> </tbody> </table> </body> </html>
2、tablesort.js文件:
3、tablesort.css文件:
tr {background: window;} td {color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; } table {border-top: 1px solid buttonshadow; border-left: 1px solid buttonshadow; border-right: 1px solid buttonhighlight; border-bottom: 1px solid buttonhighlight; } thead td {background: buttonface; font: menu; border: 1px outset white; padding-top: 0; padding: bottom: 0; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; height: 16px; } thead .arrow{font-family: webdings; color: black; padding: 0; font-size: 10px; height: 11px; width: 10px; overflow: hidden; margin-bottom: 5; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;} /*nice vertical positioning :-) */
以上就是JS实现的点击表头排序功能的示例代码分享的详细内容,更多请关注Gxl网其它相关文章!