<!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;
				width: 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>