1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 10 11 12 <p>点击按钮，表格 name 字段按字母排序:</p> 13 <p><button onclick="sortTable()">排序</button></p> 14 15 <table border="1" id="myTable"> 16 <tr> 17 <th>Name</th> 18 <th>Country</th> 19 </tr> 20 <tr> 21 <td>Berglunds snabbkop</td> 22 <td>Sweden</td> 23 </tr> 24 <tr> 25 <td>North/South</td> 26 <td>UK</td> 27 </tr> 28 29 <tr> 30 <td>Alfreds Futterkiste</td> 31 32 <td>Germany</td> 33 </tr> 34 <tr> 35 <td>Koniglich Essen</td> 36 <td>Germany</td> 37 </tr> 38 <tr> 39 <td>Magazzini Alimentari Riuniti</td> 40 <td>Italy</td> 41 </tr> 42 <tr> 43 <td>Paris specialites</td> 44 <td>France</td> 45 </tr> 46 <tr> 47 <td>Island Trading</td> 48 <td>UK</td> 49 </tr> 50 <tr> 51 <td>Laughing Bacchus Winecellars</td> 52 <td>Canada</td> 53 </tr> 54 </table> 55 <script> 56 function sortTable() { 57 var table, rows, sw, i, x, y, jh; 58 table = document.getElementById("myTable"); 59 sw = true; 60 //循环是否完成 61 while (sw) { 62 //完成了就不循环了 63 sw = false; 64 //获取行 65 rows = table.getElementsByTagName("TR"); 66 //循环获得每个单元格的内容 67 for (i = 1; i < (rows.length - 1); i++) { 68 //默认不交换 69 jh = false; 70 71 x = rows[i].getElementsByTagName("TD")[0].innerHTML.toLowerCase(); 72 y = rows[i + 1].getElementsByTagName("TD")[0].innerHTML.toLowerCase(); 73 //比较两个单元格的内容 74 if (x > y) { 75 //如果正确肯定要交换位子 76 jh= true; 77 break; 78 } 79 } 80 if (jh) { 81 //互换一下位子 82 rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); 83 sw = true; 84 } 85 } 86 } 87 88 </script> 89 </body> 90 </html>