- 前段时间一道笔试题,假设有一个记录成绩单的table,是让我们说说如何实现点击一个位置,然后对table按照其中成绩按顺序排列,再点击一次就可以按倒序排列。当时刚接触DOM不懂,现在刚刚接触了一点,就自己试着实现一下,心里也是知道必然会有很多问题,而且方法可能会很蠢。
我的方法
- 先获取table对象,再使用rows数组获取table[0]的每一行信息
- 建立数组score,获取每一行的td的内容,本例其中td有三个,分别记录了when,where和score
- 根据td中的score对数组进行排序
- 建立一个二维数组text存储score中每一个td的innerHTML
用数组text来修改table中的内容,根据标记ifg判断是正序还是倒序
注意:第四步本来是没有的,最初的想法是将排好序的score直接赋值给table,用来修改其内容,然后,果然就踩坑了;因为开始我按照以前的经验,这样是没有问题的,但是,每次我的排序都会有问题,调试发现,一旦修改了table中的某一行的内容,那么score数组中的某些数据也会发生改变!也就是说,score数组 是和table有关联的,修改table会影响到score,同时修改score也会改变table,果然是很蠢的方法,但是现阶段我所学只能让我这样做,不得已添加了一个数组来存储score中各个元素的innerHTML,也就是实际用来更新table的数据,这个是不会随着table改变而改变的。
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cities</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" />
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/clickScore.js"></script>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
<th id="scores">Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,
<abbr title="Oregon">OR</abbr>
</td>
<td>87</td>
</tr>
<tr>
<td>June 10th</td>
<td>Nanchang ,
<abbr title="Jiangxi">NC</abbr>
</td>
<td>80</td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,
<abbr title="California">CA</abbr>
</td>
<td>71</td>
</tr>
<tr>
<td>June 30th</td>
<td>Seattle,
<abbr title="Washington">WA</abbr>
</td>
<td>84</td>
</tr>
<tr>
<td>June 30th</td>
<td>Beijing,
<abbr title="Beijing">BJ</abbr>
</td>
<td>90</td>
</tr>
<tr>
<td>June 12th</td>
<td>Nanjing,
<abbr title="Jiangshu">NJ</abbr>
</td>
<td>80</td>
</tr>
<tr>
<td>June 10th</td>
<td>Shanghai,
<abbr title="Huadong">SH</abbr>
</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
- clickScore函数
function clickScore() {
// body...
if (!document.getElementById("scores")) return false;
var scores = document.getElementById("scores");
scores.onmouseover = function() {
this.style.backgroundColor = "#2aa8c6";
this.style.cursor = "pointer";
};
scores.onmouseout = function() {
this.style.backgroundColor = "#99cccc";
};
var ifg = true;
scores.onmouseup = function() {
var tables = document.getElementsByTagName("table");
var rows = tables[0].getElementsByTagName("tr");
var score = [];
for (var i = 1; i < rows.length; i++) {
score[i] = rows[i].getElementsByTagName("td");
}
for (i = 2; i < score.length; i++) {
var temp = score[i][2].innerHTML;
var temps = score[i];
for (var j = i - 1; j >= 1; j--) {
var now = score[j][2].innerHTML;
if (temp < now) {
score[j + 1] = score[j];
} else {
break;
}
}
score[j + 1] = temps;
}
var text = [];
for (i = 1; i < rows.length; i++) {
text[i] = [];
}
for (i = 1; i < rows.length; i++) {
for (j = 0; j < score[i].length; j++) {
text[i][j] = score[i][j].innerHTML;
}
}
if (ifg) {
for (i = 1; i < rows.length; i++) {
for (j = 0; j < score[i].length; j++) {
rows[i].cells[j].innerHTML = text[i][j];
}
}
} else {
for (i = 1; i < rows.length; i++) {
for (j = 0; j < score[i].length; j++) {
rows[i].cells[j].innerHTML = text[rows.length - i][j];
}
}
}
ifg = !ifg;
};
}
addLoadEvent(clickScore);
附上一个很好的方法
- 注意sort()的功能
appendChild有一个属性:
如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.这个属性存在所以可以使用oTbody.appenChild更新table
<script>
window.onload = function() {
var oTable = document.getElementById('tableTest');
var oTbody = oTable.tBodies[0];
var oBtn = document.getElementById('sort');
var arr = []; //用来存放每一个tr
var isAsc = true; //用来判断升序,还是降序
oBtn.onclick = function() {
for (var i = 0; i < oTbody.rows.length; i++) {
arr[i] = oTbody.rows[i]; //这里是把每一个tr存放到一个数组,而不是排序的依据(这里是cells[0].innerHTML)
}
//数组根据cells[0].innerHTML来排序
arr.sort(function(td1, td2) {
if (isAsc) {
return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML);
} else {
return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML);
}
});
//把排序后的tr 重新插入tbody
for (var j = 0; j < arr.length; j++) {
oTbody.appendChild(arr[j]);
}
//判断升序,降序
isAsc = !isAsc;
}
}
</script>