JS实现的点击表头排序功能的示例代码分享

来源：爱玩科技网

这篇文章主要介绍了JS实现的点击表头排序功能,可实现针对表格中的字母、数字、日期等格式进行排序的功能,涉及javascript针对页面table元素的获取及字符串、数字等排序操作相关技巧,需要的朋友可以参考下

本文实例讲述了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>17-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实现的点击表头排序功能的示例代码分享