阿里的模拟笔试题，当时时间有限没写出来，其实是因为自己对原生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. p4语言编程环境安装

    p4语言主要是用来模拟交换机的交互,是新一代的SDN解决方案,可以让数据转发平面也具有可编程能力,让软件能够真正定义网络和网络设备.详细介绍 主要流程是:安装vmware.安装Ubuntu.下载Git ...

  2. 通过汇编一个简单的C程序，分析汇编代码理解计算机是如何工作的

    秦鼎涛  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验一 通过汇编一个简单的C程序,分析汇编代码 ...

  3. 20135337朱荟潼 Linux第三周学习总结 ——Linux内核源代码简介

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 知识笔记 1.ar ...

  4. hibernate 创建工厂类

    package cn.hibernate; import org.hibernate.SessionFactory; import org.hibernate.cfg.Configuration; / ...

  5. Hamburger

    Bread: 我觉得舒婷解决问题的思路还是很不错的,对于java 的窗口框架也是很熟悉,打码速度也快了很多. Meat:但是我发现你在命名的时候会出现随意的现象,如果命名只有你自己看得懂的话,那么会增 ...

  6. 第四次WBS

    分解原则 1.将主体目标逐步细化分解,最底层的日常活动可直接分派到个人去完成: 2.每个任务原则上要求分解到不能再细分为止: 3.日常活动要对应到人.时间和资金投入. 二.任务分解的方法 1.采用树状 ...

  7. Xshell登录Docker

    使用SSH协议登录即可,用户名为docker,密码为tcuser

  8. [转帖]Windows10七大版本区别在哪？

    Windows10七大版本区别在哪? http://os.51cto.com/art/201804/570132.htm 一.Windows10家庭版 对于绝大多数用户来说,最后可能获得的应该就是Wi ...

  9. ThreadLocal变量

    什么是ThreadLocal变量?ThreadLocal,很多地方叫做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多.可能很多朋友都知道ThreadLocal为变量在每个线程中都创建了一个副 ...

  10. 洛谷P4301 [CQOI2013]新Nim游戏

    P4301 [CQOI2013]新Nim游戏 题目描述 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴. ...