<!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. CSS浏览器兼容问题集(一）

    CSS对浏览器的兼容性有时让人非常头疼,也许当你了解其中的技巧跟原理,就会认为也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml ...

  2. zend framework获取数据库中枚举类enum的数据并将其转换成数组

    在model中建立这种模型,在当中写入获取枚举类的方法 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 class Student extends Zend_D ...

  3. Android中System.currentTimeMillis()

    函数: System.currentTimeMillis(): 功能:产生一个当前的毫秒,这个毫秒事实上就是自1970年1月1日0时起的毫秒数,Date()事实上就是相当于Date(System.cu ...

  4. JS学习十七天----工厂方法模式

    工厂方法模式 前言 今天自己看了一下自己写的部分博客,发现写的好丑....開始注意自己的排版!!可是偏亮也不是一朝一夕就完毕的,我尽量让它美丽一点.....每天美丽一点点 正文 工厂方法模式是一种实现 ...

  5. 113.dynamic_cast 虚函数 通过子类初始化的父类转化为子类类型

    #include <iostream> using namespace std; //子类同名函数覆盖父类 //父类指针存储子类地址,在有虚函数情况会调用子类方法,否则会调用父类方法 cl ...

  6. 4.graph.h

    #pragma once #include <stdio.h> #include <graphics.h> #include <mmsystem.h> #pragm ...

  7. 由安装两块网卡的linux系统中引起网络不通想到的

    由安装两块网卡的linux系统中引起网络不通想到的 一天,小王突然急匆匆的来找我,他说:"我在机子上刚装的redhat怎么老也ping不通服务器,我网卡的驱动都安装了,ping 自己的两块网 ...

  8. java.beans.PropertyChangeListener

    import java.beans.PropertyChangeEvent; import java.beans.PropertyChangeListener; import java.beans.P ...

  9. Assembly.Load 详解（c#）

    我们在使用C# 语言的Assembly.Load 来加载托管程序集并使用反射功能时,一般需要先通过Assembly.Load(), Assembly.LoadFrom() 等方法将目标托管程序集加载到 ...

  10. NOIP愤怒的小鸟

    愤怒的小鸟 Description: 给你\(n<=18\)个小猪,发射的小鸟轨迹为抛物线,求最小用多少个小鸟可以将小猪全部干掉 看到n很小,我想到了搜索,于是我用\(dfs\)枚举出,每个抛物 ...