js获取tr,td内容并排序

如题

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
         .tbl-list, .tbl-list td, .tbl-list th {
             border: solid 1px #000;
             border-collapse: collapse;
             padding: 10px;
             margin: 15px;
         }
     </style>
     <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
     <title>table sort</title>
     <script type="text/javascript">
         //排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
         function sortAble(th, tableId, iRow, iCol, dataType) {
 
             var ascChar = "▲";
             var descChar = "▼";
 
             var table = document.getElementById(tableId);
			 var rows = table.tHead.rows;  
             //排序标题加背景色
             for (var i = 0; i < rows.length; i++) {
				 for(var j=0;j<rows[i].cells.length;j++){//取得第几行下面的td个数,再次循环遍历该行下面的td元素
					 var th = rows[i].cells[j];					 
					 var thText= th.innerHTML.replace(ascChar, "").replace(descChar, "");
					 if(i==iRow&&j==iCol){
					 }
					 else{
						  th.innerHTML=thText;
					 }					
				}
             }			
 
             var tbody = table.tBodies[0];
             var colRows = tbody.rows;
             var aTrs = new Array;
 
             //将得到的行放入数组,备用
             for (var i = 0; i < colRows.length; i++) {                 
                     aTrs.push(colRows[i]);                 
             }
 
 
             //判断上一次排列的列和现在需要排列的是否同一个。        
             if (table.sortCol == iCol) {
                 aTrs.reverse();
             } else {
                 //如果不是同一列,使用数组的sort方法,传进排序函数
                 aTrs.sort(compareEle(iCol, dataType));
             }
 
             var oFragment = document.createDocumentFragment();
             for (var i = 0; i < aTrs.length; i++) {
                 oFragment.appendChild(aTrs[i]);
             }
             tbody.appendChild(oFragment);
 
             //记录最后一次排序的列索引
             table.sortCol = iCol;
 
             //给排序标题加“升序、降序” 小图标显示
             var th = rows[iRow].cells[iCol];
			
             if (th.innerHTML.indexOf(ascChar) == -1 && th.innerHTML.indexOf(descChar) == -1) {
                 th.innerHTML += ascChar;
				 //alert(th.innerHTML);
             }
             else if (th.innerHTML.indexOf(ascChar) != -1) {
                 th.innerHTML=th.innerHTML.replace(ascChar, descChar);
				 //alert(th.innerHTML.replace(ascChar,descChar));

             }
             else if (th.innerHTML.indexOf(descChar) != -1) {
                  th.innerHTML=th.innerHTML.replace(descChar, ascChar);
             }
 
           
         }
 
         //将列的类型转化成相应的可以排列的数据类型
        function convert(sValue, dataType) {
             switch (dataType) {
                 case "int":
                     return parseInt(sValue, 10);
                 case "float":
                     return parseFloat(sValue);
                 case "date":
                     return new Date(Date.parse(sValue));
                 case "string":
                 default:
                     return sValue.toString();
             }
         }
 
         //排序函数,iCol表示列索引,dataType表示该列的数据类型
         function compareEle(iCol, dataType) {
             return function (oTR1, oTR2) {
 
                 var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
                 var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
                 if (vValue1 < vValue2) {
                     return -1;
                 }
                 else {
                     return 1;
                 }
 
             };
         }
 
         //去掉html标签
         function removeHtmlTag(html) {
             return html.replace(/<[^>]+>/g, "");
         }
 
 
        
 
     </script>
 </head>
 
 <body>
 
     <table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
         <thead>
             <tr>
				 <td  rowspan="2" >序号</td>
                 <td width="100px" rowspan="2" onclick="sortAble(this,'tableId', 0,1,'string')"
                     style="cursor:pointer">姓名</td>
                 <td width="200px"  rowspan="2"  onclick="sortAble(this,'tableId',0, 2, 'date')"
                     style="cursor:pointer">生日</td>
                 <td width="200px" colspan="2"  style="cursor:pointer">年龄</td>
                 <td width="100px"  rowspan="2"  onclick="sortAble(this,'tableId', 0,4, 'float')"
                     style="cursor:pointer">工资</td>

             </tr>
			 <tr>
				<td  onclick="sortAble(this,'tableId', 1, 0, 'int')"  style="cursor:pointer">age 1</td>
				<td  onclick="sortAble(this,'tableId', 1, 1, 'int')"  style="cursor:pointer">age 2</td>
			 </tr>
         </thead>
         <tbody>
             <tr group="A">
                 <td>1</td>
                 <td>Group-A</a></td>
                 <td>01/12/1982</td>
                 <td>25</td>
				 <td>26</td>
                 <td>1000.50</td>
             </tr>
             
             <tr group="B">
                 <td>4</td>
                 <td>Group-B</a></td>
                 <td>10/14/1999</td>
                 <td>18</td>
				 <td>19</td>
                 <td>1000.20</td>
             </tr>
          
             <tr group="C">
                 <td>7</td>
                 <td>Group-C</a></td>
                 <td>10/14/1980</td>
                 <td>8</td>
				 <td>20</td>
                 <td>1000.30</td>
             </tr>
           
         </tbody>
     </table>
 </body>
 </html>

 

posted @ 2016-09-20 13:30  wujixing909  阅读(3060)  评论(0编辑  收藏  举报