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)是相同类型变量的集合,可以使用共同的名字引用它.数组可被定义为任何类型,可以是一维或多维.数组中的一个特别要素是通过下标来访问它.数组提供了一种将有联系的信 ...
随机推荐
- <经验杂谈>C#中一种最简单、最基本的反射(Reflection):通过反射获取方法函数
说起反射之前和很多用C#/.net的同仁们一样,相比于一般应用层对数据的增删改查总有点觉得深奥到难以理解.其实程序这东西,用过.实践过就很简单,我一直这么认为. 先说下概念:反射 Reflection ...
- Java数据结构漫谈-ArrayList
ArrayList是一个基于数组实现的链表(List),这一点可以从源码中看出: transient Object[] elementData; // non-private to simplify ...
- 控制用户的访问之权限、角色【weber出品必属精品】
权限的作用 限制用户对数据的访问 权限的分类 1. 系统权限:能够存取数据库的权限 2. 对象权限:操作数据库对象的内容 系统权限 1.1 如何创建用户: SQL> create user t ...
- Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
我引起此原因的功能如下: 在aspx页面添加按钮 JS方法: function downPPT() { $("#Btn_DownPPT").click(); } <bo ...
- Servlet编码和解码
1.request.setCharacterencoding("XXX"); 前提是POST提交 在客户端编码对value的值进行编码之前,通知客户端用什么码表(XXX)编码 2. ...
- setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法
原文地址:http://caibaojian.com/setinterval-settimeout.html window.setInterval()方法 介绍 周期性地调用一个函数(function ...
- jquery mobile转场时加载js失效
jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...
- sgu Kalevich Strikes Back
这道题就是求一个大矩形被n个矩形划分成n+1个部分的面积,这些矩形之间不会相交,可能包含.. #include <cstdio> #include <cstring> #inc ...
- hdu 1599 find the mincost route
http://acm.hdu.edu.cn/showproblem.php?pid=1599 floyd找最小环. #include <cstdio> #include <cstri ...
- LeetCode_Palindrome Partitioning II
Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...