jQuery表格排序问题


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{padding: 20px;}
			table{border-collapse: collapse; 100%;}
			table th,td{border: 1px solid #ccc;padding: 4px;text-align: left;}
			iconfont{font-size: 20px;}
		</style>
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_m6nueror6l2fbt9.css"/>
	</head>
	<body>
		<table >
			<thead>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>金额</td>
					<th>日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>2</td>
					<td>马亿</td>
					<td>$101</td>
					<td>2016-01-10</td>
				</tr>
				<tr>
					<td>3</td>
					<td>林颢</td>
					<td>$102</td>
					<td>2015-05-10</td>
				</tr>
				<tr>
					<td>4</td>
					<td>猪洪磊</td>
					<td>$103</td>
					<td>2015/06/12</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李胜军</td>
					<td>$100</td>
					<td>2015年01月10</td>
				</tr>
			</tbody>			
		</table>
	</body>
	<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var flag = 1;
		$('thead>tr').find('th').prepend("<i class='iconfont icon-icon55'></i>");
		//添加点击事件
		$('th').on('click',function(){
			//获取点击的第几列
			var index = $(this).index();
			var pindex = $(this).parent('tr').index();
			//先把tr对象存到数组当中
			var arr = $('table').find('tr:gt(0)').get();
			//排序，拿到当前index的属性值
			arr.sort(function(a,b){
				if(index==0){
					var val1 = $(a).find("td:eq("+index+")").text(); 
					var val2 = $(b).find("td:eq("+index+")").text(); 
					if(val1 > val2) return flag;
					if(val1 < val2) return -flag;
					else return 0;
				}
				else if(index ==2){
					var val1 = $(a).find("td:eq("+index+")").text(); 
					var val2 = $(b).find("td:eq("+index+")").text(); 
					var nval1 = val1.replace(/D*/,"");
					var nval2 = val2.replace(/D*/,"");
					if(nval1 > nval2) return flag;
					if(nval1 < nval2) return -flag;
					else return 0;
				}
				else if(index ==3){
					var val1 = $(a).find("td:eq("+index+")").text(); 
					var val2 = $(b).find("td:eq("+index+")").text();
					var nval1 = val1.replace(/D/g,"-");
					var nval2 = val2.replace(/D/g,"-");
					var ntime1 =new Date(nval1).getTime(); 
					var ntime2 =new Date(nval2).getTime(); 	
					if(ntime1 > ntime2) return flag;
					if(ntime1 < ntime2) return -flag;
					else return 0;
				}
				 
			})
			//将arr重新导入到界面当中
			for (i=0;i<arr.length;i++) {
				$('table').append($(arr[i]));
			}
			flag = -flag;
		})
	</script>
</html>





特点：
1.实现id排序，金额排序，注册日期排序
2.点击标题头部进行升序排序，再点击转换成降序排序
3.日期处的字符处理
4.金额处的字符处理