js實現表格單列按字母排序
阿新 • • 發佈:2020-08-13
本文例項為大家分享了js實現表格單列按字母排序的具體程式碼,供大家參考,具體內容如下
類似於列表按字母排序,直接上程式碼啦~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格單列字母排序</title> <link href="../css/表格資料搜尋.css" rel="stylesheet"> </head> <body> <input type="button" id="myInput" onclick="myFunction()" value="點選排序" style="background-image: none"> <table id="myTable"> <tr> <th>名稱</th> <th>城市</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 src="../js/表單單列字母排序.js"> </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格資料搜尋</title> <link href="../css/表格資料搜尋.css" rel="stylesheet"> </head> <body> <input type="text" placeholder="搜尋..." id="myInput" οnkeyup="myFunction()"> <table id="myTable"> <tr> <th>名稱</th> <th>城市</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> </table> <script src="../js/表格資料搜尋.js"> </script> </body> </html>
function myFunction() { var table=document.getElementById("myTable"); var switching=true; while(switching){ switching=false; var rows=table.getElementsByTagName("tr"); for(var i=1;i<(rows.length-1);i++){ switching=false; var x=rows[i].getElementsByTagName("td")[0]; var y=rows[i+1].getElementsByTagName("td")[0]; if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){ switching=true; break; } } if(switching){ rows[i].parentNode.insertBefore(rows[i+1],rows[i]); switching=true; } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。