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 DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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中的foreach问题
2013/06/30 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python写入CSV文件的方法
2015/07/08 Python
星球大战与Python之间的那些事
2016/01/07 Python
详解Python装饰器由浅入深
2016/12/09 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python获取url的返回信息方法
2018/12/17 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
行政部工作岗位职责范本
2014/03/05 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
高中校园广播稿
2014/10/21 职场文书
国庆节主题班会
2015/08/15 职场文书
大学生安全教育心得体会
2016/01/15 职场文书