javascript - 这个表格排序哪里出错了
本文介绍了javascript - 这个表格排序哪里出错了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问一个新手问题，这个表格排序为什么点击name的时候123行输出那么多东西，不是应该输出5次吗，为什么是15次，我哪里错了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格排序</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 700px;
text-align: center;
margin: 100px auto;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px darkgreen;
font-size: 20px;
}
table caption {
line-height: 50px;
font-size: 30px;
font-weight: 700;
}
table thead {
height: 40px;
line-height: 40px;
background: darkgreen;
color: #ffffff;
}
table thead tr {
-webkit-user-select: none;
}
table thead tr th.cursor {
cursor: pointer;
}
table tbody tr {
height: 40px;
line-height: 40px;
}
table tbody tr.bg0 {
background: lightcyan;
}
table tbody tr.bg1 {
background: lightpink;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" id="tab">
<caption>表格排序</caption>
<thead>
<tr>
<th class="cursor">name</th>
<th class="cursor">age</th>
<th class="cursor">level</th>
<th>sex</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="../utils.js"></script>
<!--<script src="js/tab1.js"></script>-->
</body>
</html>
<script>
var oTab = document.getElementById("tab");
var tHead = oTab.tHead;
var tBody = oTab.tBodies[0];
var aCells = tHead.rows[0].cells;
var aRows = tBody.rows;
var data = null;
getData();
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
data = utils.jsonParse(xhr.responseText);
bindData();
}
}
}
function bindData() {
var str = '';
for (var i = 0; i < data.length; i++) {
data[i].sex = data[i].sex == 0 ? "男" : "女";
str += '<tr>\
<td>' + data[i].name + '</td>\
<td>' + data[i].age + '</td>\
<td>' + data[i].level + '</td>\
<td>' + data[i].sex + '</td>\
</tr>'
}
tBody.innerHTML = str;
changeColor();
}
function changeColor() {
for (var i=0;i<aRows.length;i++){
aRows[i].className='bg'+i%2;
}
}
for (var i=0;i<aCells.length;i++){
aCells[i].index=i;
aCells[i].onclick=function () {
sort(this.index);
}
}
function sort(index) {
var ary=utils.makeArray(aRows);
ary.sort(function (a, b) {
console.log(a,b);
a=a.cells[index].innerHTML;
b=b.cells[index].innerHTML;
if(isNaN(a)||isNaN(b)){
return b.localeCompare(a);
}
return a-b;
});
var frg=document.createDocumentFragment();
for (var j=0;j<ary.length;j++){
frg.appendChild(ary[j]);
}
console.dir(ary);
tBody.appendChild(frg);
changeColor();
}
</script>解决方案
明白了，没错，就是这样
这篇关于javascript - 这个表格排序哪里出错了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
