js简单排序
简单的排序功能
HTML代码:
<body>
<input id="btn1" type="button" value="排序"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead
<tbody>
<tr>
<td>4</td>
<td>张三</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>26</td>
<td>删除</td>
</tr>
<tr>
<td>5</td>
<td>王四</td>
<td>30</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>刘三</td>
<td>20</td>
<td></td>
</tr>
<tr>
<td>31</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>68</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>32</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>75</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>45</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>63</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>89</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>52</td>
<td>赵六</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>
</body>
js代码
<script>
window.onload=function()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function()
{
var arr=[]; for(var 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(var i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
运行以上代码 之前的效果图
运行后的效果
js简单排序的更多相关文章
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- 转:js,jQuery 排序的实现,网页标签排序的实现,标签排序
js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...
- JS简单实现:根据奖品权重计算中奖概率实现抽奖的方法
本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法. 一.示例场景 1.1.设置抽奖活动的奖项名称 奖项名称:["一等奖", "二等奖", &qu ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- Java数据结构和算法之数组与简单排序
一.数组于简单排序 数组 数组(array)是相同类型变量的集合,可以使用共同的名字引用它.数组可被定义为任何类型,可以是一维或多维.数组中的一个特别要素是通过下标来访问它.数组提供了一种将有联系的信 ...
随机推荐
- repeater截取字数
<%# Eval("ArticleName").ToString().Length > 14 ? Eval("ArticleName").ToStr ...
- uva 10061 How many zero's and how many digits ?
How many zeros and how many digits? Input: standard input Output: standard output Given a decimal in ...
- DOM之节点|属性
1.查询文档的一个或多个元素有如下方法 a. 用指定的id属性:(若一个文档中有两个相同的id,只会选择第一个;在低于IE8的IE中,getElementById()对匹配元素的ID不区分大小写,而且 ...
- [转]jQuery插件开发精品教程,让你的jQuery提升一个台阶
原文链接:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其 ...
- 数据结构与算法javascript描述
<数据结构与算法javascript描述>--数组篇 导读: 这篇文章比较长,介绍了数组常见的操作方法以及一些注意事项,最后还有几道经典的练习题(面试题). 数组的定义: JavaScri ...
- ubuntu 执行apt-get update 提示无法获得锁
问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...
- 检测字节流是否是UTF8编码
几天前偶尔看到有人发帖子问“如何自动识别判断url中的中文参数是GB2312还是Utf-8编码” 也拜读了wcwtitxu使用巨牛的正则表达式检测UTF8编码的算法. 使用无数或条件的正则表达式用起来 ...
- MySQL库表状态查询
一. 查看库的各链接状态 对于一个mysql连接或者一个线程,任何时刻都有一个状态,表示其当前正在做什么.一般使用show full processlist查看. +---------+------- ...
- Lucene.net常见功能实现知识汇总
在开发SearchEasy Site SearchEngine(搜易站内搜索引擎)的时候,经常会遇到一些搜索引擎的常见功能如何实现的问题,比如实现相关度百分比显示?如何实现在结果中搜索等等诸如此类常见 ...
- Linux服务器挂死案例分析
问题现象: 在linux服务器上运行一个指定的脚本时,就会出现无数个相同进程的,而且不停的产生,杀也杀不掉,最后系统就陷入死循环,无法登陆,只能人工去按机器的电源键才可以.这够崩溃的吧? 问题分析过程 ...