zoukankan      html  css  js  c++  java
  • 别人家的面试题--表格排序

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<title></title>
    		<meta charset="utf-8" />
    		<style type="text/css">
    			body,
    			html {
    				padding: 0;
    				margin: 0;
    				font-size: 14px;
    				color: #000000;
    			}
    			
    			table {
    				border-collapse: collapse;
    				 100%;
    				table-layout: fixed;
    			}
    			
    			thead {
    				background: #3d444c;
    				color: #ffffff;
    			}
    			
    			td,
    			th {
    				border: 1px solid #e1e1e1;
    				padding: 0;
    				height: 30px;
    				line-height: 30px;
    				text-align: center;
    			}
    			
    			.sort-asc::after,
    			.sort-desc::after {
    				content: ' ';
    				display: inline-block;
    				margin-left: 5px;
    				vertical-align: middle;
    			}
    			
    			.sort-asc::after {
    				border-left: 4px solid transparent;
    				border-right: 4px solid transparent;
    				border-bottom: 4px solid #eee;
    			}
    			
    			.sort-desc::after {
    				border-left: 4px solid transparent;
    				border-right: 4px solid transparent;
    				border-top: 4px solid #eee;
    			}
    		</style>
    	</head>
    
    	<body>
    		<table>
    			<thead id="jsHeader">
    				<tr>
    					<th>product</th>
    					<th>price</th>
    					<th>sales</th>
    				</tr>
    			</thead>
    			<tbody id="jsList">
    				<tr>
    					<td>1</td>
    					<td>10.0</td>
    					<td>800</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>30.0</td>
    					<td>300</td>
    				</tr>
    				<tr>
    					<td>3</td>
    					<td>20.5</td>
    					<td>100</td>
    				</tr>
    				<tr>
    					<td>4</td>
    					<td>40.5</td>
    					<td>200</td>
    				</tr>
    				<tr>
    					<td>5</td>
    					<td>60.5</td>
    					<td>600</td>
    				</tr>
    				<tr>
    					<td>6</td>
    					<td>50.0</td>
    					<td>400</td>
    				</tr>
    				<tr>
    					<td>7</td>
    					<td>70.0</td>
    					<td>700</td>
    				</tr>
    				<tr>
    					<td>8</td>
    					<td>80.5</td>
    					<td>500</td>
    				</tr>
    			</tbody>
    		</table><br />
    		<input type="button" onclick="sortData('sales', 'asc')" value="售价" />
    		<input type="button" onclick="sortData('product', 'asc')" value="商品" />
    		<input type="button" onclick="sortData('price', 'asc')" value="价格" />
    		<br /><br />
    		<input type="button" onclick="sortData('sales', 'desc')" value="售价" />
    		<input type="button" onclick="sortData('product', 'desc')" value="商品" />
    		<input type="button" onclick="sortData('price', 'desc')" value="价格" />
    		<script type="text/javascript">
    			/**
    			 *  请完成 sortData 函数,根据参数的要求对表格所有行进行重新排序。
    			 *  1、type为product、price或者sales,分别对应第1 ~ 3列
    			 *  2、order为asc或者desc,asc表示升序,desc为降序
    			 *  3、例如 sortData('price', 'asc') 表示按照price列从低到高排序
    			 *  4、所有表格内容均为数字,每一列数字均不会重复
    			 *  5、不要使用第三方插件
    			 */
    			function sortData(type, order) {
    				//完成您的代码
    				let _parentNodes = document.getElementById("jsList"),
    					_allTrs = _parentNodes.getElementsByTagName("tr"),
    					filed = type == "product" ? 0 : type == "price" ? 1 : 2,
    					sortBy = order == "desc" ? 0 : 1;
    
    				for(let i = 0; i < _allTrs.length - 1; i++) {  
    					for(let j = i + 1; j < _allTrs.length; j++) {      
    						let _trAf = _allTrs[j],
    							_trBf = _allTrs[i];
    						if(Number(_trAf.cells[filed].innerText) > Number(_trBf.cells[filed].innerText) == !sortBy)
    							_parentNodes.insertBefore(_trAf, _trBf);  
    					}
    				}
    			}
    			//sortData('product', 'desc');
    			//sortData('price', 'asc');
    			//sortData('sales', 'ascs');
    		</script>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    算法训练 P1103
    算法训练 表达式计算
    算法训练 表达式计算
    基础练习 时间转换
    基础练习 字符串对比
    Codeforces 527D Clique Problem
    Codeforces 527C Glass Carving
    Codeforces 527B Error Correct System
    Codeforces 527A Glass Carving
    Topcoder SRM 655 DIV1 250 CountryGroupHard
  • 原文地址:https://www.cnblogs.com/lgjc/p/10136390.html
Copyright © 2011-2022 走看看