【C022066】如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
地瓜先森 1楼
实现思路：使用jQuery操作DOM对象实现
1、等待DOM加载完毕
$(document).ready(function);
2、利用jQuery的选择器，选择第一行所有的列，并添加 click() 事件
$("table tr:first td").click(function);3、click()代码体里面判断当前点击的是那一列，并判断是该升序还是降序
4、再利用jQuery选择器将除去第一行之外的所有行(tr)选中，并存入一个变量中
var list = $("table tr:gt(0)");5、然后通过冒泡排序的方法，将list中所有数值进行排序，并存到一个新的变量中
var newList = $();
for (var i = 0; list.Length;i++) {
//取出来的对象是DOM对象，并不是jQuery对象，所以需要重新封装下
var num = parseInt($(list[i]).find(td:eq([当前列])));
newList[i]= // 冒泡排序
}6、然后将除去第一行的所有行的html清空
$("table tr:gt(0)").html("");7、再通过遍历排序后的集合重新输出DOM对象
for (var i = 0; newList .Length;i++) {
$("table tr:eq("+i+")").html(newList[i];
}8、以上步骤即可实现排序的效果
Sa lettre 15楼
let content = document.getElementById('content');
let name = document.getElementById('name');
let HP = document.getElementById('HP');
let MP = document.getElementById('MP');
let SP = document.getElementById('SP');
let dataList = [{
name: '德鲁伊',
HP: 17,
MP: 24,
SP: 13
}, {
name: '月之骑士',
HP: 15,
MP: 22,
SP: 16
}, {
name: '众神之王',
HP: 19,
MP: 15,
SP: 20
}, {
name: '浏览剑客',
HP: 23,
MP: 15,
SP: 14
}];
HP.onclick = function(e) {
let temp = parseInt(this.dataset.flag);
sortFun('HP', temp);
this.dataset.flag = Number(!temp);
draw(dataList);
}
MP.onclick = function(e) {
let temp = parseInt(this.dataset.flag);
sortFun('MP', temp);
this.dataset.flag = Number(!temp);
draw(dataList);
}
SP.onclick = function(e) {
let temp = parseInt(this.dataset.flag);
sortFun('SP', temp);
this.dataset.flag = Number(!temp);
draw(dataList);
}
/**
* 排序方法
* @param {[string]} str [根据哪个字段排序]
* @param {[type]} flag [升序还是降序]
* @return {[type]} [des cription]
*/
function sortFun(str, flag) {
dataList.sort((a, b) => {
return flag ? a[str] - b[str] : b[str] - a[str];
})
}
function draw(data) {
let str = '';
data.map(item => {
str += `<dl><dt>${item.name}</dt><dt>${item.HP}</dt><dt>${item.MP}</dt><dt>${item.SP}</dt></dl>`;
})
str += '</div>';
content.innerHTML = str;
}
function init() {
draw(dataList);
}
window.onload = function() {
init();
}
京公网安备 11010802034997号