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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
jquery操作select大全
Apr 25 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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中显示数组与对象的实现代码
2011/04/18 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
小学生学习感言
2014/03/10 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
学校创先争优活动总结
2014/08/28 职场文书
项目合作意向书
2015/05/08 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
python缺失值的解决方法总结
2021/06/09 Python