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.

  • Llbil
  • Kahtrad
  • Belminh
  • Bergum
  • Rosario
  • Phpif
  • Souyft

 

Xem kết quả

  • 24
  • 15
  • 3
  • 30
  • 8
  • 34
  • 11

 

Xem kết quả

 

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>

Xem kết quả

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);    
});

Xem kết quả