<!DOCTYPE HTML>

 <html>

  <head>

    <meta charset="utf-8">

    <title></title>

   </head> 

 <body>

 <p>点击按钮，表格 name 字段按字母排序:</p>

 <p><button onclick="sortTable()">排序</button></p>

 <table border="1" 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, sw, i, x, y, jh;

   table = document.getElementById("myTable");

   sw = true;

   //循环是否完成

   while (sw) {

     //完成了就不循环了

     sw = false;

     //获取行

     rows = table.getElementsByTagName("TR");

     //循环获得每个单元格的内容

     for (i = 1; i < (rows.length - 1); i++) {

       //默认不交换

       jh = false;

       x = rows[i].getElementsByTagName("TD")[0].innerHTML.toLowerCase();

       y = rows[i + 1].getElementsByTagName("TD")[0].innerHTML.toLowerCase();

       //比较两个单元格的内容

       if (x > y) {

         //如果正确肯定要交换位子

         jh= true;

         break;

       }

     }

     if (jh) {

       //互换一下位子

       rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

       sw = true;

     }

   }

 }

 </script>

 </body>

  </html>

JavaScript 实现表格单列按字母排序的更多相关文章

  1. localeCompare按首字母排序汉字

    sort() 方法用于对数组的元素进行排序. 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字.比较函数应该具有两个参数 a 和 b,其 ...

  2. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  3. 联系人的侧边字母索引ListView 将手机通讯录姓名通过首字母排序。

      package com.lixu.letterlistview; import java.util.ArrayList; import java.util.List; import org.apa ...

  4. 获取手机通讯录放入PinnedSectionListView中，按名字首字母排序，并且实现拨打电话功能。

    package com.lixu.tongxunlu; import java.util.ArrayList; import com.lixu.tongxunlu.PinnedSectionListV ...

  5. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  6. Android 联系人字母排序（仿微信）

    现在很多APP只要涉及到联系人的界面,几乎都会采取字母排序以及导航的方式.作为程序猿,这种已经普及的需求还是需要学习的,于是小生开始了在网上默默的学习之路,网上学习的资料质量参差不齐,不过也有很不错的 ...

  7. HashMap加入数据后，会自动根据首字母排序

    1.Map<String, ArrayList<XX>> entityHashMap = new HashMap<>(); 然后增加一些数据,会发现根据String ...

  8. Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音

    转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...

  9. mysql中文名字按首字母排序

    在mysql数据库中可以使用GBK编码对中文进行排序,如名字按首字母排序 order by convert(substr(tu.username,1,1) using 'GBK') 其中substr方 ...

随机推荐

  1. Mac上配置 Ruby on Rails和Git

    Ruby on Rails on Mac =============================================================================== ...

  2. p2p項目夭折，有種蛋蛋的憂傷。。

      在高考完的暑假就在跟杰哥讨论怎样实现的校内p2p文件共享,就在今天.我们无奈的宣布差点儿夭折. 上图是測试图. 那时候的思路已经完好.就是:"学生上传共享文件到咱们工作室的server. ...

  3. android 聊天室窗体

    public class MainActivity extends Activity { ScrollView scrollView; Button button; LinearLayout layo ...

  4. .vscode folder

    https://stackoverflow.com/questions/32964920/should-i-commit-the-vscode-folder-to-source-control Che ...

  5. numpy 数据类型与 Python 原生数据类型

    查看 numpy 数据类型和 Python 原生数据类型之间的对应关系: In [51]: dict([(d, type(np.zeros(1,d).tolist()[0])) for d in (n ...

  6. COGS 577 蝗灾 线段树+CDQ分治

    第一次写cdq分治 感谢hhd&lty 这20亿对CP的指导(逃) 其实 就是 递归看左半部分对右半部分的贡献 (树状数组写挂了--临时改的线段树[大写的尴尬]) //By SiriusRen ...

  7. 互联网金融研究组:P2P借贷平台：性质、风险与监管（上）

    互联网金融研究组(): P2P借贷平台:性质.风险与监管(上) 目 录 一.性质与合法性 1.  P2P网络借贷 1.1  概念重新界定 1.2  发展概况与特点 2.  延伸模式及其合法性浅析 2. ...

  8. XCode6报数组越界错误的问题

    今天碰到一个非常奇葩的问题, 调试了半天: 错误:"index 0 beyond bounds for empty array",  意思就是说数据源数组为nil, 所以你调用直接 ...

  9. Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart). Attachment support is disa

    转自:https://blog.csdn.net/ouyangtianhan/article/details/6797999 Unable to find required classes (java ...

  10. BZOJ 1232 Kruskal

    思路: 跟昨天的考试题特别像-.. 就是裸的Kruskal 把边权设为连接的两个点的点权之和加上边权*2 搞定 //By SiriusRen #include <cstdio> #incl ...