原生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的排序的更多相关文章

  1. 原生js封装table表格操作,获取任意行列td,任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  2. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  3. 原生JS表格行拖动排序,添加了回调功能

    function tableDnD(el, callback) { if (typeof (el) == "string") { el = document.getElementB ...

  4. 原生JS操作 table object HTMLTableSectionElement 对象,获取行数

    <tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...

  5. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  6. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  7. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  8. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  9. 关于排序原生js实现

    内外排序的区别 排序可以分为两种:内排序和外排序.当数据量不算太大的时候,计算可以在内存中完成的排序称为内排序.当数据量特别大,计算的数据,需要分多次进入内存中进行计算的排序称之为外排序 插入排序 直 ...

随机推荐

  1. Python学习--Selenium模块

    1. Python学习--Selenium模块介绍(1) 2.Python学习--Selenium模块学习(2) 其他: 1. Python学习--打码平台

  2. mysql-client 与mysql-server的区别

    mysql-server 与 mysql-client是DBMS的两个面向不同操作对象的工具. server是DBMS面向物理层次,包含存储数据的一系列机制.处理方法的集成: client是DBMS面 ...

  3. supervisor 使用系列之一

    supervisor 使用系列之一 前几年自己用PHP写过一个服务守护的脚本,初步实现了被守护脚本的状态监控.优雅杀死.以及自动重启的功能.面试的时候也有问到,为什么不使用supervisor这个工具 ...

  4. phpstorm添加laravle语法支持

    PHPStorm神器可以支持更友好的laravel框架代码提示,只需要执行如下才做: 第一步:在项目的composer.json中添加如下一行 "require": { " ...

  5. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

  6. react native环境搭建(含错误处理)

    1.  Python 2  注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...

  7. Vue2.0中v-for迭代语法变化(key、index)【转】

    转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...

  8. Oracle_spatial的常见错误与注意事项

    常见的错误 1.ORA-13226:没有空间索引接口将不被支持 当使用一个空间操作符时,如果没有使用空间索引导致该操作符不能被完成将会返回该错误.这可能会发生在当你使用的列上没有空间索引.或者优化器没 ...

  9. Arcgis创建SDE_Geometry、SDO_Geometry的区别

    先初略的了解下SDE_Geometry和SDO_Geometry的区别: 1. SDO_GEOMETRY Oracle Spatial在MDSYS模式下定义了一系列几何类型.函数来支持空间数据的存储和 ...

  10. 如何永久激活(破解) IntelliJ IDEA 2018.1.3

    版权声明:本文为博主原创文章,转载不需要博主同意,只需贴上原文链接即可. https://blog.csdn.net/zhige_me/article/details/80369336 1.去官网下载 ...