阿里的模拟笔试题，当时时间有限没写出来，其实是因为自己对原生dom操作不熟悉，这里补一下。

题目的大意是有一个表格，如代码所示

    <table>

      <tr>

        <th>Name</th>

        <th>Index</th>

      </tr>

      <tr>

        <td>Jan</td>

        <td>1</td>

      </tr>

      <tr>

        <td>Saj</td>

        <td>6</td>

      </tr>

      <tr>

        <td>Law</td>

        <td>4</td>

      </tr>

      <tr>

        <td>Aq</td>

        <td>3</td>

      </tr>

    </table
Name Index
Jan 1
Saj 6
Law 4
Aq 3

大概长这样吧，注意有表头，然后让你写一个函数对表中的记录，比如按idx升序排序

思路：就将表中的数据全都取出来，排序之后重新建表。

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <table>

      <tr>

        <th>Name</th>

        <th>Index</th>

      </tr>

      <tr>

        <td>Jan</td>

        <td>1</td>

      </tr>

      <tr>

        <td>Saj</td>

        <td>6</td>

      </tr>

      <tr>

        <td>Law</td>

        <td>4</td>

      </tr>

      <tr>

        <td>Aq</td>

        <td>3</td>

      </tr>

    </table>

</body>

<script type="text/javascript">

    var mysort = ()=>{

        var table = document.getElementsByTagName('table')[0]

        var trlist= table.querySelectorAll('tr')

        var len = trlist.length

        var trArr = []

        var th

        for(let i=0;i<len;i++){

            var tds = trlist[i].querySelectorAll('td')

            if(tds.length==0) { th = trlist[i] ; continue }

            trArr.push({name:tds[0].innerText,index:tds[1].innerText})

        }

        trArr.sort(function(a,b){

            return a.index>b.index

        })

        table.innerHTML = ""

        table.appendChild(th)

        for(let i=0;i<trArr.length;i++){

            var tr = document.createElement("TR")

            var tdname = document.createElement("TD")

            tdname.innerText = trArr[i].name

            var tdindex = document.createElement("TD")

            tdindex.innerText = trArr[i].index

            tr.appendChild(tdname)

            tr.appendChild(tdindex)

            table.appendChild(tr)

        }

    }

    mysort()

</script>

</html>

要记住的点就是，querySelectorAll这个方法很好用，返回一个查询的元素的数组，在访问的时候，因为dom有可能变换，所以先把长度记录下来，然后再循环访问。

用原生js对表格排序的更多相关文章

  1. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  2. JS对表格排序(支持对序号，数字，字母，日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  3. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  4. 原生JS 实现元素排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  7. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  8. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  9. 关于排序原生js实现

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

随机推荐

  1. NumCPU()在slice中的使用

    package main import ( "fmt" "runtime" ) var slice []int func main() { array := m ...

  2. MySQL数据库--外键约束及外键使用

    什么是主键.外键关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键. 比如: 学生表(学号,姓名,性别,班级) 其中每个学生的学号是唯 ...

  3. PAT题解-1118. Birds in Forest (25)-（并查集模板题）

    如题... #include <iostream> #include <cstdio> #include <algorithm> #include <stri ...

  4. Test Cases

    对于mode1 1 路径下一个空文件夹       结果:生成一个空的txt 2路径下一个文件夹内包含一个txt内容为abd(最基本的一个单词) 3路径下一个空文件夹一个txt,txt内容为以不同符号 ...

  5. C语言版本：单链表的实现（优化版本）

    未优化版本:http://www.cnblogs.com/duwenxing/p/7569376.html slist.h #ifndef __SLIST_H__ #define __SLIST_H_ ...

  6. 团队作业(五)-笔记app top5

    在互联网快速发展的情况下,各个行业的软件层出不穷,五花八门.各个行业都有相当多的软件介入其中,在如此多的软件之中,便有了相当激烈的竞争角逐.今天我们十五万的总冠军就着笔记APP行业中位列top 5的软 ...

  7. this 指向问题

    你不懂JS: this 与对象原型 第二章: this豁然开朗! 在第一章中,我们摒弃了种种对this的误解,并且学习了this是一个完全根据调用点(函数是如何被调用的)而为每次函数调用建立的绑定. ...

  8. CentOS 安装 Harbor的简单过程（仅使用http 未使用https）

    1. 下载离线安装包 在线安装 99% 会失败, 建议还是使用离线安装包 下载地址 https://github.com/vmware/harbor/releases 20180719 时最新版本的g ...

  9. Redis的相关问题总结

    一.Redis的优缺点及适用场景 Redis 是一个基于内存的高性能key-value数据库.很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘 ...

  10. Ubuntu17安装Jenkins

    Java安装 Jenkins基于Java, 所以需要先安装java. Linux下安装java只要配置java环境变量即可. 首先,解压java到相应目录,我一般习惯把安装的软件放到目录/usr/lo ...