Jquery 选中表格一列并对表格排序
<div id="cnblogs_post_body"> 在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容，并取得<th>标签的type属性值，将获取<tr>的html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中，然后将表格<tr>中的html全部置空，根据type属性值的不同采用不同的方法对<td>的内容进行比较，根据比较结果对数组array进行排序，然后将排序后的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了，则直接对数组进行倒置。提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用javascript的localeCompare方法，该方法支持汉字字符串的排序，遗憾的是该方法不兼容谷歌浏览器。所以在谷歌浏览器上汉字字符串的排序结果会不正确。
HTML代码清单：
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_2ba5d382-878b-42c4-819b-c1280f16fb23" class="cnblogs_code_hide">1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">2 <html>3<head>4 <title> 表格排序 </title>5 <meta name="Generator" content="EditPlus">6 <meta name="Author" content="tschengbin">7 <meta name="Keywords" content="jquery tableSort">8 <meta name="Description" content="">9 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 10 <script type="text/javascript" src="tableSort.js"></script> 11 <style type="text/css"> 12 div{ 13 width: 1024px; 14 margin: 0 auto;/*div相对屏幕左右居中*/ 15 } 16 table{ 17 border: solid 1px #666; 18 border-collapse: collapse; 19 width: 100%; 20 cursor: default; 21 } 22 tr{ 23 border: solid 1px #666; 24 height: 30px; 25 } 26 table thead tr{ 27 background-color: #ccc; 28 } 29 td{ 30 border: solid 1px #666; 31 } 32 th{ 33 border: solid 1px #666; 34 text-align: center; 35 cursor: pointer; 36 } 37 .sequence{ 38 text-align: center; 39 } 40 .hover{ 41 background-color: #3399FF; 42 } 43 </style> 44</head> 45 46<body> 47 <div> 48 <table id="tableSort"> 49 <thead> 50 <tr> 51 <th type="number">序号</th> 52 <th type="string">书名</th> 53 <th type="number">价格（元）</th> 54 <th type="string">出版时间</th> 55 <th type="number">印刷量（册）</th> 56 <th type="ip">IP</th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr class="hover"> 61 <td class="sequence">1</td> 62 <td>狼图腾</td> 63 <td>29.80</td> 64 <td>2009-10</td> 65 <td>50000</td> 66 <td>192.168.1.125</td> 67 </tr> 68 <tr> 69 <td class="sequence">2</td> 70 <td>孝心不能等待</td> 71 <td>29.80</td> 72 <td>2009-09</td> 73 <td>800</td> 74 <td>192.68.1.125</td> 75 </tr> 76 <tr> 77 <td class="sequence">3</td> 78 <td>藏地密码2</td> 79 <td>28.00</td> 80 <td>2008-10</td> 81 <td></td> 82 <td>192.102.0.12</td> 83 </tr> 84 <tr> 85 <td class="sequence">4</td> 86 <td>藏地密码1</td> 87 <td>24.80</td> 88 <td>2008-10</td> 89 <td></td> 90 <td>215.34.126.10</td> 91 </tr> 92 <tr> 93 <td class="sequence">5</td> 94 <td>设计模式之禅</td> 95 <td>69.00</td> 96 <td>2011-12</td> 97 <td></td> 98 <td>192.168.1.5</td> 99 </tr>100 <tr>101 <td class="sequence">6</td>102 <td>轻量级 Java EE 企业应用实战</td>103 <td>99.00</td>104 <td>2012-04</td>105 <td>5000</td>106 <td>192.358.1.125</td>107 </tr>108 <tr>109 <td class="sequence">7</td>110 <td>Java 开发实战经典</td>111 <td>79.80</td>112 <td>2012-01</td>113 <td>2000</td>114 <td>192.168.1.25</td>115 </tr>116 <tr>117 <td class="sequence" onclick="sortArray()">8</td>118 <td>Java Web 开发实战经典</td>119 <td>69.80</td>120 <td>2011-11</td>121 <td>2500</td>122 <td>215.168.54.125</td>123 </tr>124 </tbody>125 </table>126 </div>127</body>128 </html>
页:
[1]