js表格根据某一列排序

最新推荐文章于 2022-03-29 16:08:30 发布

mister_snail

最新推荐文章于 2022-03-29 16:08:30 发布

阅读量1.1k

点赞数 1

分类专栏： Jquery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/Mister_SNAIL/article/details/103532694

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Jquery

6 篇文章 0 订阅

订阅专栏

嗯哼，直接上代码~

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">	
    	<title>升序降序练习</title>
    	<!-- Bootstrap -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	<style type="text/css"> 
    table{ 
      width:500px; 
      height:500px; 
      border:#400040 solid 2px; 
      border-collapse:collapse; 
    } 
    table td,th{ 
      border:solid 2px; 
    } 
    table th{ 
      background-color:#c0c0c0; 
    } 
    
  </style>
	</head>
	<body>
		<button class="descendingOrder">降序</button>
		<button class="ascendingOrder">升序</button>
		<table id="tableId"> 
			<thead>
				<tr>
					<th>姓名</th> 
					<th>年龄</th> 
					<th>出生地</th> 
				</tr>
			</thead>
			<tbody>
				<tr class='c1'> 
					<td>张三</td> 
					<td><input type="text" name=""></td> 
					<td>湖南长沙</td> 
				</tr> 
				<tr class='c2'> 
					<td>李四</td> 
					<td><input type="text" name=""></td> 
					<td>湖南常德</td> 
				</tr> 
				<tr class='c3'> 
					<td>王五</td> 
					<td><input type="text" name=""></td> 
					<td>湖南临澧</td> 
				</tr> 
				<tr class='c4'> 
					<td>赵六</td> 
					<td><input type="text" name=""></td> 
					<td>浙江杭州</td> 
				</tr> 
			</tbody>
		</table> 		

		
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	    <!-- Include all compiled plugins (below), or include individual files as needed -->
	   	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	   	<script type="text/javascript">

	   		// 将字符串转化为数字
	   		var numFormat = function(val){
	   			return $.trim(val) === '' ? 0 : parseFloat(val);
	   		};

	   		/**
	   		 * table根据某一列进行排序（js），table格式（<table><thead><tr><td></td></tr></thead><tbody><tr><td></td></tr></tbody></table>）
			 * $table: table元素
			 * columnNum: 按第几列进行排序
			 * isAscending: 是否正序排列（默认为false降序排列，否则为true升序排列）
			 */			
			var sortByColumn = function($table, columnNum, isAscending){

	    		var tableRows = $table.find('tbody tr'); 
	    		var returnArr = tableRows;
				var length = returnArr.length;
	    		columnNum = columnNum - 1;	

				if (isAscending) {
					// 升序排列
					for (var x = 0; x < length; x++) {
						for (var y = x + 1; y < length; y++) {
						
							var current = tableRows.eq(x).find('td').eq(columnNum).children().val();
							var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();
							
							if (numFormat(current) > numFormat(latter)) { 
								var temp = returnArr[x]; 
								returnArr[x] = returnArr[y]; 
								returnArr[y] = temp;
							}
							
						}  
						
					}
		      	} else {
					// 降序排列
					for (var x = length-1; x >= 0; x--) {
						for (var y = x - 1; y >= 0; y--) {
						
							var current = tableRows.eq(x).find('td').eq(columnNum).children().val();
							var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();
							
							if (numFormat(current) > numFormat(latter)) { 
								var temp = returnArr[x]; 
								returnArr[x] = returnArr[y]; 
								returnArr[y] = temp;
							}
							
						}  
						
					}
				}	
				
				// 最后正常输出
				for (var x = 0; x < length; x++) {
					returnArr[x].parentNode.appendChild(returnArr[x]); 
				}				

	   		};
	    
			// 降序
	    	$('.descendingOrder').on('click', function(){
	    		var table = $('#tableId');
				sortByColumn($('#tableId'), 2);
	    	});
			// 升序
			$('.ascendingOrder').on('click', function(){
	    		var table = $('#tableId');
				sortByColumn($('#tableId'), 2, true);
	    	});

	    </script>
	</body>
</html>

mister_snail

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js表格根据某一列排序

嗯哼，直接上代码~<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de...
复制链接

扫一扫