<!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. Hadoop HDFS (4) Hadoop Archives

    用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...

  2. uvalive 4730王国kingdom（并查集+线段树）

     题意:有T组測试数据.每组数据的N表示有N个城市,接下来的N行里每行给出每一个城市的坐标(0<=x,y<=1000000),然后有M(1<M<200000)个操作,操作有 ...

  3. 大数据时代的新BI系统架构发展趋势

    商业智能(BI,Business Intelligence).它是一套完整的解决方式,用来将企业中现有的数据进行有效的整合,高速准确的提供报表并提出决策根据.帮助企业做出明智的业务经营决策.     ...

  4. 七牛用户搭建c# sdk的图文讲解

    Qiniu 七牛问题解答 问题描写叙述:非常多客户属于小白类型. 可是请不要随便喷七牛的文档站.由于须要一点http的专业知识才干了解七牛的api文档.如今我给大家弄个c# sdk的搭建步骤 问题解决 ...

  5. Spring MVC 返回视图时添加的模型数据------POJO

    POJO(Plain Old Java Objects)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和 EJB混淆起来, 而且简 ...

  6. Google Summer of Code 2017 经验谈

    Google Summer of Code (GSoC) 2018 又要开始了. 如果想实现你心中的开源梦想, 用代码让世界变得更美好. 参加GSoC可能是你进入开源的世界最好途径. GSoC是什么 ...

  7. Android 使用Retrofit请求API数据

    概览 Retrofit 是一个Square开发的类型安全的REST安卓客户端请求库.这个库为网络认证.API请求以及用OkHttp发送网络请求提供了强大的框架 .理解OkHttp 的工作流程见  这个 ...

  8. 远程带参数POST访问接口，返回数据

    1. string token = GetRequest.GetString("token"); int customer_id = GetRequest.GetInt(" ...

  9. 安装oracle常见问题分析

    1,之前已经安装过软件,卸载不完全 /tmp/.oracle /tmp/ora* /var/tmp/ora* /etc/ora* 2,安装介质权限或者本身就有问题 3,oracle用户 $/HOME/ ...

  10. mysql索引工作原理、分类

    一.概述 在mysql中,索引(index)又叫键(key),它是存储引擎用于快速找到所需记录的一种数据结构.在越来越大的表中,索引是对查询性能优化最有效的手段,索引对性能影响非常关键.另外,mysq ...