<!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. 《JSP+Servlet+Tomcat应用开发从零開始学》

    当当网页面:  http://product.dangdang.com/23619990.html 内容简单介绍      本书全面介绍了 JSP开发中涉及的相关技术要点和实战技巧. 全书结构清晰,难 ...

  2. python list的+，+=，append，extend

    面试题之中的一个. def func1(p): p = p + [1] def func2(p): p += [1] p1 = [1,2,3] p2 = [1,2,3] func1(p1) func2 ...

  3. 学习 shell —— 编写基本脚本

    set:查看环境变量: 0. 简单说明 一般而言,shell 会通过 PATH 变量来查找命令,如果要执行用户编写的脚本(未添加进 PATH 路径),还需两步操作: 需要 $ ./xx 为需执行该脚本 ...

  4. 添加使用session回话属性

    @SessionAttributes("nowUser") nowUser :id/userName/password public String delectMsg(int id ...

  5. java中replaceAll反斜杠\ or java中replaceAll 括号[

    java中replaceAll反斜杠\   String s=new String("this is a \\"); s.replaceAll("\\",&qu ...

  6. 现实人脸识别性别之路----弄清楚train_test_split函数

    '''train_test_split(trian_data,trian_target,test_size,random_state)各个参数表示的意义:trian_data表示被划分的样本特征集tr ...

  7. Hi3531D搭建环境时，出现的问题

    1.展开SDK包得时候,运行./sdk.unpack得时候出现: 原因:ubuntu14.04中默认得是dash,要将dash改成bash. 解决方法:sudo ln -fs /bin/bash /b ...

  8. JAVA数组的基本方法

    数组的基本方法 数组可以存放多个数据,多个数据类型要统一数组格式: 格式一:常用写法 数组类型[] 数组名称 = new 数据类型[数组长度]; 格式二:蛋疼写法 数组类型[] 数组名称; 数组名称 ...

  9. mysql查一张表有哪些索引

    可以用这个命令: show index from table_name; 得到输出: +------------------+------------+------------+----------- ...

  10. valgrind的说明使用和原理

    编译 #gcc -g -o test test.c 内存检查#valgrind --tool=memcheck --leak-check=yes --show-reachable=yes ./test ...