js实现表格单列按字母排序

本文实例为大家分享了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;}}}

以上就是本文的全部内容，希望对大家的学习有所帮助