原生js table排序

同事面试排序table写的太慢被pass了我肯定要装一波比啊

Q: 根据table的时间点击按钮时进行时间排序

先看table的值（就是一个简单的table）:

<table border="1">
			<tr>
				<th>学号</th>
				<th>名字</th>
				<th>日期</th>
			</tr>
			<tr>
				<td>1002</td>
				<td>小铭</td>
				<td>2017年12月20日</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>小红</td>
				<td>2018年12月31日</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>小黄</td>
				<td>2018年1月30日</td>
			</tr>
			<tr>
				<td>1005</td>
				<td>小米</td>
				<td>2018年11月20日</td>
			</tr>
			<tr>
				<td>1006</td>
				<td>小蒋</td>
				<td>2016年3月20日</td>
			</tr>
			<tr>
				<td>1007</td>
				<td>小捷</td>
				<td>2018年7月2日</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>小邓</td>
				<td>2018年4月3日</td>
			</tr>
		</table>

然后我们设置一个按钮当点击按钮时会排序

然后我们先获取table，吧这个table的数据取到（注意去掉th,即去掉table头）

var tableNode = document.querySelector("table")
			var rows0 = tableNode.rows
			var rightRow = []
			for(var i = 1; i < rows0.length; i++) {
				rightRow.push(rows0[i])
			}
			rightRow.sort(sortG)

然后我们队这个table进行排序我个人喜欢使用sort 冒泡排序也是可以的

function transToDate(a) {
			var val
			val = a.replace(/年|月|日/g, '-')
			val = val.slice(0, a.length - 1)
			return new Date(val).getTime()
		}

		function sortG(a, b) {
			return transToDate(a.cells[2].innerHTML) - transToDate(b.cells[2].innerHTML)
		}

然后把获得的值放入table

for(var j = 0; j < rightRow.length; j++) {
					rightRow[j].parentNode.appendChild(rightRow[j]);
				}

最后做一个如果已经是倒序排列就让他下次是正序排列

if(flag) {
				for(var j = 0; j < rightRow.length; j++) {
					rightRow[j].parentNode.appendChild(rightRow[j]);
				}
			} else {
				for(var n = rightRow.length - 1; n >= 0; n--) {
					rightRow[n].parentNode.appendChild(rightRow[n]);
				}
			}

			flag = !flag

最后附完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table border="1">
			<tr>
				<th>学号</th>
				<th>名字</th>
				<th>日期</th>
			</tr>
			<tr>
				<td>1002</td>
				<td>小铭</td>
				<td>2017年12月20日</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>小红</td>
				<td>2018年12月31日</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>小黄</td>
				<td>2018年1月30日</td>
			</tr>
			<tr>
				<td>1005</td>
				<td>小米</td>
				<td>2018年11月20日</td>
			</tr>
			<tr>
				<td>1006</td>
				<td>小蒋</td>
				<td>2016年3月20日</td>
			</tr>
			<tr>
				<td>1007</td>
				<td>小捷</td>
				<td>2018年7月2日</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>小邓</td>
				<td>2018年4月3日</td>
			</tr>
		</table>
		<button onclick="sortTable()">排序</button>
	</body>
	<script>
		function transToDate(a) {
			var val
			val = a.replace(/年|月|日/g, '-')
			val = val.slice(0, a.length - 1)
			return new Date(val).getTime()
		}

		function sortG(a, b) {
			return transToDate(a.cells[2].innerHTML) - transToDate(b.cells[2].innerHTML)
		}

		var flag = false

		function sortTable() {
			var tableNode = document.querySelector("table")
			var rows0 = tableNode.rows
			var rightRow = []
			for(var i = 1; i < rows0.length; i++) {
				rightRow.push(rows0[i])
			}
			rightRow.sort(sortG)
			if(flag) {
				for(var j = 0; j < rightRow.length; j++) {
					rightRow[j].parentNode.appendChild(rightRow[j]);
				}
			} else {
				for(var n = rightRow.length - 1; n >= 0; n--) {
					rightRow[n].parentNode.appendChild(rightRow[n]);
				}
			}

			flag = !flag
		}
	</script>

</html>

猜你喜欢