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 相关文章推荐
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php递归创建目录的方法
2015/02/02 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
vuex存储token示例
2019/11/11 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python list操作用法总结
2015/11/10 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
华为慧通面试题
2012/09/11 面试题
ajax是什么及其工作原理
2012/02/08 面试题
优秀党员获奖感言
2014/02/18 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
行政诉讼答辩状
2015/05/21 职场文书
投资入股协议书
2016/03/22 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js