Hướng dẫn xây dựng chức năng sắp xếp dữ liệu - Demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { width: 500px; margin: auto; } #sort { width: 100px; height: 30px; margin-bottom: 10px; } #id01 { list-style-type: none; padding: 0; margin: 0; } #id01 li { border: 1px solid #ddd; margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } </style> </head> <body> <div class="container"> <h2>Freetuts.net hướng dẫn xây dựng chức năng sắp xếp dữ liệu</h2> <button onclick="sortListDir()" id="sort">Sắp xếp</button> <ul id="id01"> <li>Barcelona</li> <li>Madrid</li> <li>Manchester</li> <li>Berlin</li> <li>Rome</li> <li>Liverpool</li> <li>Milan</li> <li>Turin</li> <li>Paris</li> <li>LonDon</li> <li>Munich</li> <li>Ha Noi</li> <li>Ho Chi Minh City</li> </ul> </div> </body> <script> function sortListDir() { // khai báo các biến cần thiết var list, i, switching, b, shouldSwitch, dir, switchcount = 0; list = document.getElementById("id01"); // gán biến switching đại diện cho việc có tiếp tục kiểm tra hay không switching = true; //thiết lập kiểu sắp xếp, đầu tiên là tăng dần dir = "asc"; // Sử dụng vòng lặp cho đến khi nào switching = false while (switching) { // Gán lại biến switching = false switching = false; // lấy danh sách các thẻ li chứa giá trị cần sắp xếp b = list.getElementsByTagName("LI"); // lặp qua tất cả các phần tử li for (i = 0; i < (b.length - 1); i++) { /* gán giá trị cho biến shouldSwitch đại diện cho việc có đổi vị trí của 2 phần tử liền kề hay không */ shouldSwitch = false; /*so sánh giá trị 2 phần tử gần kề tùy vào kiểu sắp xếp*/ if (dir == "asc") { // Kiểu sắp xếp tăng dần if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { /* Nếu phần tử đứng trước lớn hơn phần tử đứng sau thì gán giá trị cho biến shouldSwitch = true để đổi vị trí và thoát khỏi vòng lặp*/ shouldSwitch= true; break; } } else if (dir == "desc") { // Kiểu sắp xếp giảm dần if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) { /* Nếu phần tử đứng trước nhỏ hơn phần tử đứng sau thì gán giá trị cho biến shouldSwitch = true để đổi vị trí và thoát khỏi vòng lặp*/ shouldSwitch= true; break; } } } // kiểm tra biến shouldSwitch if (shouldSwitch) { /* Nếu shouldSwitch = true thì đổi vị trí hai phần tử hiện tại và tiếp tục lặp lại vòng lặp while */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; // mỗi lần đổi vị trí tăng biến switchcount lên 1 đơn vị switchcount ++; } else { /* Nếu chưa đổi chỗ bất kì phần tử nào và kiểu sắp xếp là "asc" thì đổi kiểu sắp xếp thành "desc" và thực hiện lại vòng lặp while*/ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script> </html>
PHÓNG TO