同事面试排序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>