JS学习之表格的排序简单实例


Posted in Javascript onMay 16, 2016

JS学习之表格的排序简单实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <input id="btn1" type="button" value="排序">
    <table id="tab1" width="200" border="1" cellpadding="14">
      <thead>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
      </thead>
      <tbody>
        <tr>
          <td>2</td>
          <td>张三</td>
          <td>20</td>
        </tr>
        <tr>
          <td>4</td>
          <td>李四</td>
          <td>25</td>
        </tr>
        <tr>
          <td>3</td>
          <td>赵龙</td>
          <td>30</td>
        </tr>
        <tr>
          <td>1</td>
          <td>孙河</td>
          <td>21</td>
        </tr>
      </tbody>
    </table>
    <script type="text/javascript">
      var oTab=document.getElementById('tab1');
      var oBtn=document.getElementById('btn1');
      oBtn.onclick=function(){
        var arr=[]
        for(i=0;i<oTab.tBodies[0].rows.length;i++){
          arr[i]=oTab.tBodies[0].rows[i];
        }
        arr.sort(function(tr1,tr2){
        var n1=parseInt(tr1.cells[0].innerHTML);  
        var n2=parseInt(tr2.cells[0].innerHTML);
        return n1-n2;
        })
        for(i=0;i<arr.length;i++){
          oTab.tBodies[0].appendChild(arr[i])
        }
      }
    </script>
  </body> 
</html>

以上这篇JS学习之表格的排序简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制淡入淡出示例代码
Nov 12 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
JS触摸与手势事件详解
May 09 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
JavaScript操作选择对象的简单实例
May 16 #Javascript
JS组件Bootstrap实现图片轮播效果
May 16 #Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 #Javascript
JS获取元素多层嵌套思路详解
May 16 #Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
You might like
Linux编译升级php的详细方法
2013/11/04 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python3字符串输出常见面试题总结
2020/12/01 Python
详解Python中的文件操作
2021/01/14 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
微观物理专业自荐信
2014/01/26 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
vue封装数字翻牌器
2022/04/20 Vue.js
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python