thực hành - sắp xếp danh sách
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách sắp xếp theo thứ tự một danh sách bằng HTML, CSS và JavaScript.
Sắp xếp danh sách
Click vào nút bên dưới để thực hiện sắp xếp danh sách.
Cách sắp xếp một danh sách
Bước 1) Thêm HTML:
Ví dụ
<button type="button" id="myBtn">Click Here</button> <ul id="myUl"> <li>Llbil</li> <li>Kahtrad</li> <li>Belminh</li> <li>Bergum</li> <li>Rosario</li> <li>Phpif</li> <li>Souyft</li> </ul>
Bước 2) Thêm CSS:
Ví dụ
/* Tạo kiểu cho nút button */ #myBtn { border:none; outline:none; padding:10px 15px; border-radius:5px; cursor:pointer; background-color:dodgerblue; color:white; } /* Thêm hiệu ứng khi hover */ #myBtn:hover { background-color:orange; }
Bước 3) Thêm JavaScript:
Ví dụ
<script> // Khai báo các biến và lấy giá trị var myBtn, ul, li, i, j, x, thamso = true; myBtn = document.getElementById('myBtn'); // Gán sự kiện Click vào nút button myBtn.onclick = function() { ul = document.getElementById('myUl'); li = ul.getElementsByTagName('li'); const li_sort = []; // Cần tạo mảng mới vì sau khi sắp xếp sẽ xóa phần tử ban đầu for(i = 0; i < li.length; i++) { li_sort[i] = li[i]; } // Sắp xếp từ trên xuống if(thamso) { li_sort.sort(function(a, b) { if(a.innerHTML > b.innerHTML) { return 1; }else if(a.innerHTML < b.innerHTML) { return -1; }else{ return 0; } }); li_sort.forEach(function(li) { ul.appendChild(li); }); x = document.createElement("i"); x.setAttribute("class","fa fa-arrow-down"); myBtn.innerHTML = "Từ trên xuống "; myBtn.appendChild(x); thamso = false; // Sắp xếp từ dưới lên }else if (!thamso){ li_sort.sort(function(a, b) { if(a.innerHTML > b.innerHTML) { return -1; }else if(a.innerHTML < b.innerHTML) { return 1; }else{ return 0; } }); li_sort.forEach(function(li) { ul.appendChild(li); }); x = document.createElement("i"); x.setAttribute("class","fa fa-arrow-up"); myBtn.innerHTML = "Từ dưới lên "; myBtn.appendChild(x); thamso = true; } } </script>
Nếu muốn sắp xếp danh sách là một dãy số, chúng ta điều chỉnh hàm javascript bên trong phương thức sort(), cụ thể như sau
Ví dụ
li_sort.sort(function(a, b) { return parseInt(a.innerHTML) - parseInt(b.innerHTML); });