本篇文章為大家展示了JavaScript中怎么實現表格排序，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
Table sorter包括JavaScript和一點CSS，能夠讓原始的html table變得可以分別按照各欄數據值，對各行排序。
在表頭任意一個欄目中點擊一下，下面各行將按照此欄目值的升序排序
按照字符串比較來確定順序
再次點擊該欄目，變更為降序排序
點擊其它欄目，則按其它欄目的值重新排序
注意，排序時，欄目奇偶行的背景色保持奇數白色、偶數淺灰色
不能改動原html，只能夠添加js和css文件
不能使用任何類庫，只能用原生DOM API
JavaScript必須模塊化，JS的調用入口，必須按照下面的圖示：
"use strict";
window.onload = function () {var tables = getAllTables();
makeAllTablesSortalbe(tables);
};//嵌入的話用下面兩行..// var tables = getAllTables();// makeAllTablesSortalbe(tables);function getAllTables() {return document.getElementsByTagName("table");
}function makeAllTablesSortalbe(tables) {for (var i = 0; i < tables.length; i++)
makeSort(tables[i]);
}//讓列表變得可排序function makeSort(table) {var th = table.getElementsByTagName("th");for (var i = 0; i < th.length; i++) {//綁定按鈕事件th[i].onclick = function () {var index = 0;
changeStyle(th, this);//找出索引值for (var j = 0; j < th.length; j++) {if (this == th[j])
index = j;
}
sortByTh(table, index, this.className);
};
}
}//改變樣式function changeStyle(th, t) {for (var i = 0; i < th.length; i++) {if (th[i] == t) {if (th[i].className.indexOf("descend") != -1 )
th[i].className = th[i].className.replace("descend", "ascend");else if (th[i].className.indexOf("ascend") != -1 )
th[i].className = th[i].className.replace("ascend", "descend");elseth[i].className += " descend";
} else {
th[i].className = th[i].className.replace("descend", "");
th[i].className = th[i].className.replace("ascend", "");
}
}
}//排序function sortByTh(table, index, className) {var action = className.indexOf("descend") != -1 ? "descend" : "ascend";var array = [];for (var i = 1; i < table.getElementsByTagName("tr").length; i++) {
array[i-1] = table.getElementsByTagName("tr")[i];
}
array.sort(function (a, b) {//升序if (action == 'descend') {return a.cells[index].innerHTML <= b.cells[index].innerHTML;
} else {//降序return a.cells[index].innerHTML >= b.cells[index].innerHTML;
}
});for (var i = 0; i < array.length; i++)
table.getElementsByTagName("tbody")[0].appendChild(array[i]);
}CSS:
border: 1px solid gray;margin: 0;padding: 3px;border-collapse: collapse;
}tr:nth-child(even),tr:hover {background-color: #DEDEDE;}th {text-align: left;background-color: #041A7F;color: white;font-weight: bold;padding-right:16px;}.ascend, .descend {background-color: #A4B0FC;background-position: right;background-repeat: no-repeat;}.ascend {background-image: url("ascend.png");}.descend {background-image: url("descend.png");}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sortable table</title><link rel="stylesheet" type="text/css" href="sorter.css" /><script type="text/javascript" src="sorter.js"></script></head><body><h2>Sortable table</h2><h3>To-Do</h3><table id="todo"><thead><tr><th>What?</th><th>When?</th><th>Location</th></tr></thead><tbody><tr><td>Paris Web 2007</td><td>2007-11-15</td><td>IBM La Defense / INSIA</td></tr><tr class="alternate"><td>Paris On Rails 2007</td><td>2007-12-10</td><td>Cite des Sciences</td></tr><tr><td>Burger Quiz party</td><td>2007-04-14</td><td>Volta</td></tr></tbody></table><h3>Staff</h3><table id="staff"><thead><tr><th>First name</th><th>Last name</th><th>Latest checkin</th></tr></thead><tbody><tr><td>Richard</td><td>Piacentini</td><td>2007-03-27</td></tr><tr class="alternate"><td>Eric</td><td>Daspet</td><td>2007-03-28</td></tr><tr><td>Aurore</td><td>Jaballah</td><td>2007-03-15</td></tr></tbody></table></body></html>
table, tr *{border: 1px solid gray;margin: 0;padding: 3px;border-collapse: collapse;}tr:nth-child(even),tr:hover {background-color: #DEDEDE;}th {text-align: left;background-color: #041A7F;color: white;font-weight: bold;padding-right:16px;}.ascend, .descend {background-color: #A4B0FC;background-position: right;background-repeat: no-repeat;}.ascend {background-image: url("ascend.png");}.descend {background-image: url("descend.png");}上述內容就是JavaScript中怎么實現表格排序，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
