js实现表格单列按字母排序


Posted in Javascript onAugust 12, 2020

本文实例为大家分享了js实现表格单列按字母排序的具体代码,供大家参考,具体内容如下

类似于列表按字母排序,直接上代码啦~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格单列字母排序</title>
  <link href="../css/表格数据搜索.css" rel="stylesheet">
</head>
<body>
<input type="button" id="myInput" onclick="myFunction()" value="点击排序" style="background-image: none">
<table id="myTable">
  <tr>
    <th>名称</th>
    <th>城市</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 src="../js/表单单列字母排序.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格数据搜索</title>
  <link href="../css/表格数据搜索.css" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myInput" οnkeyup="myFunction()">
<table id="myTable">
  <tr>
    <th>名称</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>
<script src="../js/表格数据搜索.js">
</script>
</body>
</html>
function myFunction() {
  var table=document.getElementById("myTable");
  var switching=true;
  while(switching){
    switching=false;
    var rows=table.getElementsByTagName("tr");
    for(var i=1;i<(rows.length-1);i++){
      switching=false;
      var x=rows[i].getElementsByTagName("td")[0];
      var y=rows[i+1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        switching=true;
        break;
      }
    }
    if(switching){
      rows[i].parentNode.insertBefore(rows[i+1],rows[i]);
      switching=true;
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
javascript的hashCode函数实现代码小结
Aug 11 #Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 #Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 #Javascript
封装 axios+promise通用请求函数操作
Aug 11 #Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 #Javascript
vue 调用 RESTful风格接口操作
Aug 11 #Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 #Javascript
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP 的 __FILE__ 常量
2007/01/15 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vuex的简单使用教程
2018/02/02 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python中的super()方法使用简介
2015/08/14 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
投资建议书模板
2014/05/12 职场文书
市场调查策划方案
2014/06/10 职场文书
兵马俑导游词
2015/02/02 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
SQL Server实现分页方法介绍
2022/03/16 SQL Server