W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <title>将 HTML 表格按数字排序</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>ID</th> <th>Name</th> </tr> <tr> <td>5</td> <td>Berglunds snabbkop</td> </tr> <tr> <td>3</td> <td>North/South</td> </tr> <tr> <td>6</td> <td>Alfreds Futterkiste</td> </tr> <tr> <td>2</td> <td>Koniglich Essen</td> </tr> <tr> <td>1</td> <td>Magazzini Alimentari Riuniti</td> </tr> <tr> <td>7</td> <td>Paris specialites</td> </tr> <tr> <td>4</td> <td>Island Trading</td> </tr> </table> <script> function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /* 创建一个循环，直到没有交换发生: */ 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 (Number(x.innerHTML) > Number(y.innerHTML)) { // 如果是，则标记为交换并跳出循环： shouldSwitch = true; break; } } if (shouldSwitch) { /* 如果标记了交换，则执行交换并标记为已经进行了交换： */ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } } </script> </body> </html>