Document

.price.up::after {

content: '↑';

color: blue;

}

.price.down::after {

content: '↓';

color: red;

}

id書名作者價格數量操作

1西游記吳承恩401x2紅樓夢曹雪芹303x3水滸傳施耐庵421x4三國羅貫中552x

//查找tbody元素

var oTbody = document.querySelector('tbody');

//類數組 --nodeList 查找tr的所有元素

var oPrice = document.querySelector('.price');

oPrice.onclick = function () {

//聲明空數組，并對tr進行循環遍歷 將元素追加到新數組里

var oTr = document.querySelectorAll('tr');

arr = [];

for (var i = 0; i < oTr.length; i++) {

arr.push(oTr[i]);

}

var isDown = this.classList.contains('down');

if (isDown) {

this.classList.remove('down');

this.classList.add('up');

//對新數組進行排序

arr.sort(function (a, b) {

var n1 = parseInt(a.cells[3].innerHTML);

var n2 = parseInt(b.cells[3].innerHTML);

//cells=children 但cells只能在表格里使用

/* var n1 = parseInt(a.children[3].innerHTML);

var n2 = parseInt(b.children[3].innerHTML); */

return n2 - n1;

})

} else {

this.classList.remove('up');

this.classList.add('down');

arr.sort(function (a, b) {

var n1 = parseInt(a.cells[3].innerHTML);

var n2 = parseInt(b.cells[3].innerHTML);

//cells=children 但cells只能在表格里使用

/* var n1 = parseInt(a.children[3].innerHTML);

var n2 = parseInt(b.children[3].innerHTML); */

return n1 - n2;

})

}

//遍歷新數組，將元素添加到tbody里

arr.forEach(function (item) {

oTbody.appendChild(item);

})

}

//方法二

/* var oTbody = document.querySelector('tbody');

var oPrice = document.querySelector('.price');

var sort = -1;

oPrice.onclick = function () {

var oTr = document.querySelectorAll('tbody tr');

arr = [];

for (var i = 0; i < oTr.length; i++) {

arr.push(oTr[i]);

}

var isDown = this.classList.contains('down');

if (isDown) {

this.classList.remove('down');

this.classList.add('up');

} else {

this.classList.remove('up');

this.classList.add('down');

}

sort = -sort;

arr.sort(function (a, b) {

var n1 = parseInt(a.cells[3].innerHTML);

var n2 = parseInt(b.cells[3].innerHTML);

if (n1 > n2) {

return sort;

} else {

return -sort;

}

});

arr.forEach(function (item) {

oTbody.appendChild(item);

})

} */

一鍵復制

編輯

Web IDE

原始數據

按行查看

歷史

總結

以上是生活随笔為你收集整理的升序降序图标显示html,表格升序降序.html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。