Paano i-sort ang listahan
Matututuhan kung paano i-sort ang listahan ng HTML gamit ang JavaScript.
Mag-click para i-sort ang listahan sa alpabetikal na pagkakasunod-sunod:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
Buuin ang function ng pag sort
halimbawa
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortList() { var list, i, switching, b, shouldSwitch; list = document.getElementById("id01"); switching = true; /* Buuin ang isang loop, na magpapatuloy hanggang walang dapat palitan na item: */ while (switching) { // Mag-declare muna: walang dapat palitan na item sa kasalukuyan switching = false; b = list.getElementsByTagName("LI"); // Suriin ang lahat ng item ng listahan: for (i = 0; i < (b.length - 1); i++) { // Mag-declare muna: ang kasalukuyang item at ang susunod na item ay hindi dapat palitan ng posisyon shouldSwitch = false; /* Check kung dapat palitan ang posisyon ng susunod na item sa kasalukuyang item: */ kung (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { /* Kung ang abugado ng susunod na item ay sa unahan ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */ kung (dir == "desc") { break; } } kung (shouldSwitch) { /* Kung na-markahan na para sa pagpalitan, isagawa ang pagpalitan at markahan na nangyari ang pagpalitan: */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; } } } </script>
Pataas at pababa na pag sort
Sa unang pag-click sa button, ang direksyon ng pag sort ay pataas (A hanggang Z).
Muli-click, ang direksyon ng pag sort ay pababa (Z hanggang A):
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
halimbawa
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortListDir() { var list, i, switching, b, shouldSwitch, dir, switchcount = 0; list = document.getElementById("id01"); switching = true; // i-set ang direksyon ng pagayos sa ascendendo: dir = "asc"; // lumikha ng isang loop na magpapatuloy hanggang walang dapat palitan: while (switching) { // Unang pahayag: Walang dapat palitan sa kasalukuyan: switching = false; b = list.getElementsByTagName("LI"); // Suriin ang lahat ng item ng listahan: for (i = 0; i < (b.length - 1); i++) { // Unang pahayag: Ang kasalukuyang item at ang susunod na item ay hindi dapat palitan sa posisyon: shouldSwitch = false; /* Suruhin ang susunod na item kung dapat palitan sa kasalukuyang item ayon sa direksyon ng pagayos (ascendendo o descendendo): */ kung (dir == "asc") { kung (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { /* Kung ang abugado ng susunod na item ay sa unahan ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */ kung (dir == "desc") { break; } } kung (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) { /* Kung ang abugado ng susunod na item ay sa likod ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */ shouldSwitch= true; break; } } } kung (shouldSwitch) { /* Kung na-markahan na para sa pagpalitan, isagawa ang pagpalitan at markahan na nangyari ang pagpalitan: */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; // Pagbubukas: Bawasan ang switchcount bawat pagpalitan: switchcount ++; } /* Kung walang ginawang palitan at ang direksyon ay "ascendendo", ay i-set ang direksyon sa "descendendo" at muliin ang while loop. */ kung (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script>
ayusin ang listahan ayon sa numero
halimbawa
kung (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) { shouldSwitch = true; break; }