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:window.onload的使用介绍
Nov 13 Javascript
js打造数组转json函数
Jan 14 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python super()方法原理详解
2020/03/31 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python爬虫要用到的库总结
2020/07/28 Python
css3 transform属性详解
2014/09/30 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
买房委托公证书
2014/04/08 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
golang正则之命名分组方式
2021/04/25 Golang