資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用 JavaScript 對 HTML 列表進行排序？
要使用 JavaScript 對 HTML 列表進行排序，程式碼如下 −
示例
<!DOCTYPE html>
<html>
<body>
<h1>Sorting list example</h1>
<button>Click to sort</button>
<ul class="animalList">
<li>Giraffe</li>
<li>Camel</li>
<li>Dog</li>
<li>Lion</li>
<li>Cheetah</li>
<li>Cat</li>
</ul>
<script>
document .getElementsByTagName("button")[0] .addEventListener("click", sortList);
function sortList() {
var list, i, sortFlag, LiEle, sorted;
list = document.querySelector(".animalList");
sortFlag = true;
while (sortFlag) {
sortFlag = false;
LiEle = list.getElementsByTagName("LI");
for (i = 0; i < LiEle.length - 1; i++) {
sorted = false;
if ( LiEle[i].innerHTML.toLowerCase() > LiEle[i + 1].innerHTML.toLowerCase() ) {
sorted = true;
break;
}
}
if (sorted) {
LiEle[i].parentNode.insertBefore(LiEle[i + 1], LiEle[i]);
sortFlag = true;
}
}
}
</script>
</body>
</html>輸出
以上程式碼將生成以下輸出 −
單擊“點選排序”按鈕 −
更新日期： 06-May-2020
944 次瀏覽
廣告