W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <title>Sort a HTML Table Alphabetically</title> <style> table { border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: left; padding: 16px; } tr:nth-child(even) { background-color: #f2f2f2 } </style> </head> <body> <p>点击按钮，根据客户姓名按字母顺序对表格进行排序：</p> <p><button onclick="sortTable()">排序</button></p> <table id="myTable"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> </table> <script> function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /* 制作一个循环，直到满足条件为止。 no switching has been done: */ while (switching) { // 首先声明：当前没有行需要交换： switching = false; rows = table.rows; /* 遍历所有表格行（第一行除外，因为它包含表头）： */ for (i = 1; i < (rows.length - 1); i++) { // 首先声明不应进行任何交换： shouldSwitch = false; /* 获取要比较的两个元素，一个来自当前行，一个来自下一行： */ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 1].getElementsByTagName("TD")[0]; // 检查两行是否应该交换位置： if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { // 如果应该交换，则标记为需要交换，并跳出当前循环 shouldSwitch = true; break; } } if (shouldSwitch) { /* 如果已标记为需要交换，则执行交换并标记已进行了交换： */ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } } </script> </body> </html>