HTML代码:
<table border="1" style="width:300px" align="center">
<thead>
<th>姓名</th>
<th>性别</th>
<th>日期</th>
</thead>
<tbody class="container">
<tr>
<td>张三</td>
<td>女</td>
<td>2000/08/23</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>1993/11/02</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>1998/01/15</td>
</tr>
</tbody>
</table>
<div>
<button onclick="setDom('asc')">升序</button><button onclick="setDom('desc')">降序</button>
</div>
JavaScript代码:
<script>
let compareAttribute = function (keyName, type) {
return function (beforeObj, currentObj) {
let beforeVal = new Date(beforeObj[keyName]).getTime();
let currentVal = new Date(currentObj[keyName]).getTime();
// 方法一
// if (beforeVal > currentVal) {
// return 1;
// } else if (beforeVal < currentVal) {
// return -1;
// } else {
// return 0;
// };
//方法二(注意点:升序为两数求差值为负数, 降序为两数求差值为正数) ;
if ('desc' === type) {
return currentVal - beforeVal;
} else {
return beforeVal - currentVal;
}
}
}
function setDom(type) {
// 获取tr集合可以通过注释的这两句或使用中的那两句
// let tbodyNodes = document.getElementsByTagName('tbody');
// let trNodes = tbodyNodes[0].getElementsByTagName("tr");
// 第一步:先获取出整个table的数据,拼接成一个对象数组;
let tbodyNodes = document.querySelector('.container');
let trNodes = tbodyNodes.getElementsByTagName("tr");
let newTr = Array.from(trNodes);
let data = newTr.map(element => {
let ind = 0;
return {
name: element.getElementsByTagName("td")[ind++].innerText,
gender: element.getElementsByTagName("td")[ind++].innerText,
date: element.getElementsByTagName("td")[ind++].innerText,
}
});
// 第二步:得到对象数组data后,调用sort排序方法,传入compareAttribute函数,
// 在这里我是根据日期进行排序,所以传入date属性,type为升序还是降序
data.sort(compareAttribute('date', type));
// 第三步:根据排序完毕后的新数组重新生成tbody内部节点,循环拼接成新tr再replace掉原本的旧tr;在这里亦可以考虑先清空tbody,再直接append进入tbody的方式。
data.forEach((node, ind) => {
let eachTr = document.createElement('tr');
for (const key in node) {
if (node.hasOwnProperty(key)) {
let eachTd = document.createElement('td');
eachTd.innerText = node[key];
eachTr.appendChild(eachTd);
}
}
tbodyNodes.replaceChild(eachTr, tbodyNodes.getElementsByTagName("tr")[ind]);
});
}
</script>