原生js实现table的排序
原生js实现table的排序
今天遇到了一个问题就是使用原生js对table标签进行排序
一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧children的值赋给table
但是问题出现了,就是每次操作children的值都没有效果。
最后发现自己走入了一个误区就是想要操作html标签只能通过修改innerHtml来进行操作,操作完innerhtml后children会自动改变
直接上代码吧
HTML代码
<table>
<thead>
<tr><th>id</th><th>price</th><th>sales</th></tr>
</thead>
<tbody id="jsList">
<tr><td>1</td><td>10.0</td><td>800</td></tr>
<tr><td>2</td><td>30.0</td><td>600</td></tr>
<tr><td>3</td><td>20.5</td><td>700</td></tr>
<tr><td>4</td><td>40.5</td><td>500</td></tr>
<tr><td>5</td><td>60.5</td><td>300</td></tr>
<tr><td>6</td><td>50.0</td><td>400</td></tr>
<tr><td>7</td><td>70.0</td><td>200</td></tr>
<tr><td>8</td><td>80.5</td><td>100</td></tr>
</tbody>
</table>
代码
function sort(type, order) {
var table = document.getElementById("jsList");
var trArr = table.children;
var intType;
if (type == "id") {
intType = 0;
}
else if (type == "price") {
intType = 1;
}
else if (type == "sales") {
intType = 2;
}
var temp
if (order == "asc") {
for (var i = 0; i < trArr.length-1; i++) {
for(j=0;j<trArr.length-i-1;j++){
if((trArr[j].children[intType].innerHTML-0)>(trArr[j+1].children[intType].innerHTML-0)){
temp=trArr[j].innerHTML;
trArr[j].innerHTML=trArr[j+1].innerHTML;
trArr[j+1].innerHTML=temp;
}
}
}
} else {
for (var i = 0; i < trArr.length-1; i++) {
for(j=0;j<trArr.length-i-1;j++){
if((trArr[j].children[intType].innerHTML-0)<(trArr[j+1].children[intType].innerHTML-0)){
temp=trArr[j].innerHTML;
trArr[j].innerHTML=trArr[j+1].innerHTML;
trArr[j+1].innerHTML=temp;
}
}
}
}
}
原生js实现table的排序的更多相关文章
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生JS表格行拖动排序,添加了回调功能
function tableDnD(el, callback) { if (typeof (el) == "string") { el = document.getElementB ...
- 原生JS操作 table object HTMLTableSectionElement 对象,获取行数
<tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- 原生js实现tab切换
//通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- 关于排序原生js实现
内外排序的区别 排序可以分为两种:内排序和外排序.当数据量不算太大的时候,计算可以在内存中完成的排序称为内排序.当数据量特别大,计算的数据,需要分多次进入内存中进行计算的排序称之为外排序 插入排序 直 ...
随机推荐
- cisco查看机框 板卡 电源 SN 风扇环境运行状态和一些常用命令 巡检命令
查看设备运行环境及状态 show environment 查看设备环境show environment temperature --查设备温度 show environment fans --查看设备 ...
- chrome浏览器访问Google的插件“谷歌访问插件”以及常用插件
1.解决新版谷歌浏览器无法从该网站添加应用.拓展程序和用户脚本 1.在Google Chrome浏览器的桌面快捷方式上鼠标右键,选择属性(R). 2. 在目标(T)后添加参数 --enable-e ...
- leetcode 486 预测赢家
题目描述 给定一个表示分数的非负整数数组. 玩家1从数组任意一端拿取一个分数,随后玩家2继续从剩余数组任意一端拿取分数,然后玩家1拿,--.每次一个玩家只能拿取一个分数,分数被拿取之后不再可取.直到没 ...
- BZOJ4269:再见Xor(线性基)
Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行一个正整数N. 接下来一行N个非负整数. ...
- Effective MySQL之SQL语句最优化——读书笔记之二
第二章,基本的分析命令 本章简单介绍了如下几个基本的MySQL分析命令: EXPLAIN命令 生成QEP不是确定的 QEP不会绑定给一个SQL或者存储过程,而是在执行的时候根据实际情况生成 可以通过Q ...
- yield协程
1.Generator Generator , 一种可以返回迭代器的生成器,当程序运行到yield的时候,当前程序就唤起协程记录上下文,然后主函数继续操作,当需要操作的时候,在通过迭代器的next重新 ...
- hadoop学习通过虚拟机安装hadoop完全分布式集群
要想深入的学习hadoop数据分析技术,首要的任务是必须要将hadoop集群环境搭建起来,可以将hadoop简化地想象成一个小软件,通过在各个物理节点上安装这个小软件,然后将其运行起来,就是一个had ...
- docker-machine create -d generic 运行的波折过程及遇见的问题
这是一个愚蠢的学习过程,但是因为觉得过程还是值得记录的,还是写了下来 2>driver = generic 1)在这个过程中使用的都是本地的mac系统,然后尝试在mac本地create -d g ...
- Python2.7-sched
sched 模块,实现了简单的事件按计划时间表执行的功能,缺点在于运行的时候会占用主线程,直到事件执行完毕,更好的方法是用 threading.Timer 类 创建实例方法: sched.schedu ...
- TCP和UDP套接字编程 (java实现)
在了解网络编程之前,我们先了解一下什么叫套接字 套接字即指同一台主机内应用层和运输层之间的接口 由于这个套接字是建立在网络上建立网络应用的可编程接口 因此也将套接字称为应用程序和网络之间的应用程序编程 ...