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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
理解javascript对象继承
Apr 17 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
PHP htmlentities()函数用法讲解
2019/02/25 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
python将文本分每两行一组并保存到文件
2018/03/19 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
人事档案接收函
2014/01/12 职场文书
三严三实学习心得体会
2014/10/13 职场文书
党员民主评议总结
2014/10/20 职场文书