JavaScript實現table排序
阿新 • • 發佈：2019-02-15
- 前段時間一道筆試題，假設有一個記錄成績單的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" - 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>