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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
webpack4简单入门实例
Sep 06 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python代码的打包与发布详解
2014/07/30 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python 忽略warning的输出方法
2018/10/18 Python
python 产生token及token验证的方法
2018/12/26 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
建筑专业自我鉴定
2013/10/22 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
小学开学寄语
2014/01/19 职场文书
论文致谢词范文
2015/05/14 职场文书
起诉书格式范文
2015/05/20 职场文书
小学中队长竞选稿
2015/11/20 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技