原生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实现
内外排序的区别 排序可以分为两种:内排序和外排序.当数据量不算太大的时候,计算可以在内存中完成的排序称为内排序.当数据量特别大,计算的数据,需要分多次进入内存中进行计算的排序称之为外排序 插入排序 直 ...
随机推荐
- Python学习--Selenium模块
1. Python学习--Selenium模块介绍(1) 2.Python学习--Selenium模块学习(2) 其他: 1. Python学习--打码平台
- mysql-client 与mysql-server的区别
mysql-server 与 mysql-client是DBMS的两个面向不同操作对象的工具. server是DBMS面向物理层次,包含存储数据的一系列机制.处理方法的集成: client是DBMS面 ...
- supervisor 使用系列之一
supervisor 使用系列之一 前几年自己用PHP写过一个服务守护的脚本,初步实现了被守护脚本的状态监控.优雅杀死.以及自动重启的功能.面试的时候也有问到,为什么不使用supervisor这个工具 ...
- phpstorm添加laravle语法支持
PHPStorm神器可以支持更友好的laravel框架代码提示,只需要执行如下才做: 第一步:在项目的composer.json中添加如下一行 "require": { " ...
- AngularJS 中<a> 超链接标签不起作用?
开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...
- react native环境搭建(含错误处理)
1. Python 2 注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Oracle_spatial的常见错误与注意事项
常见的错误 1.ORA-13226:没有空间索引接口将不被支持 当使用一个空间操作符时,如果没有使用空间索引导致该操作符不能被完成将会返回该错误.这可能会发生在当你使用的列上没有空间索引.或者优化器没 ...
- Arcgis创建SDE_Geometry、SDO_Geometry的区别
先初略的了解下SDE_Geometry和SDO_Geometry的区别: 1. SDO_GEOMETRY Oracle Spatial在MDSYS模式下定义了一系列几何类型.函数来支持空间数据的存储和 ...
- 如何永久激活(破解) IntelliJ IDEA 2018.1.3
版权声明:本文为博主原创文章,转载不需要博主同意,只需贴上原文链接即可. https://blog.csdn.net/zhige_me/article/details/80369336 1.去官网下载 ...