<!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. C语言keywordstatic的绝妙用途

    为什么要说static妙,它确实是妙,在软件开发或者单片机开发过程中,大家总以为static就是一个静态变量.在变量类型的前面加上就自己主动清0了.还有就是加上statickeyword的,无论是变量 ...

  2. sklearn preprocessing 数据预处理（OneHotEncoder）

    1. one hot encoder sklearn.preprocessing.OneHotEncoder one hot encoder 不仅对 label 可以进行编码,还可对 categori ...

  3. LINQ查询基础

    一.什么是LINQ LINQ是Language Integrate Query的缩写,意为语言集成查询,是微软在.Net Framework 4.5版中推出的主要特性之一. 它为开发人员提供了统一的数 ...

  4. main函数argc，argv操作

    使用main(int argc, char *argv[])==main(int argc, char **argv)的基本操作是linux编程的最基本的一步,在windows下也是exe脱离IDE运 ...

  5. 详解：Linux Chrony 设置服务器集群同步时间

    导读: Chrony是一个开源的自由软件,像CentOS 7或基于RHEL 7操作系统,已经是默认服务,默认配置文件在 /etc/chrony.conf 它能保持系统时间与时间服务器(NTP)同步,让 ...

  6. Safe and efficient allocation of memory

    Aspects of the present invention are directed at centrally managing the allocation of memory to exec ...

  7. C++虚表的原理，很好

    下面这篇文章讲的很好. http://www.cnblogs.com/lihaosky/articles/1606502.html 假设我们有这样的一个类: class Base { public: ...

  8. JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  9. atitit.jndi的架构与原理以及资源配置and单元測试实践

    atitit.jndi的架构与原理以及资源配置and单元測试实践 1. jndi架构 1 2. jndi实现原理 3 3. jndi资源配置 3 3.1. resin  <database> ...

  10. Qt源码编译

    Qt源码编译 eryar@163.com Key words. Qt, 源码编译 1.Introduction 随着Qt版本升级,源码编译出来的库体积越来越大.如果只是用Qt来做GUI,Qt提供的预编 ...