阿里的模拟笔试题，当时时间有限没写出来，其实是因为自己对原生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. kaggle 欺诈信用卡预测——Smote+LR

    from:https://zhuanlan.zhihu.com/p/30461746 本项目需解决的问题 本项目通过利用信用卡的历史交易数据,进行机器学习,构建信用卡反欺诈预测模型,提前发现客户信用卡 ...

  2. HyperLedger/Fabric SDK使用Docker容器镜像快速部署上线

    HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...

  3. centos crontab 计划任务 设置与查看

    centos 上 crontab 计划任务 ,这个版本解释的比较清晰 林涛 发表于:2017-4-27 11:11 分类:26点 标签:crontab,Linux,计划任务 36次 这个版本的cron ...

  4. 《Linux内核分析》第四周学习笔记

    <Linux内核分析>第四周学习笔记 扒开系统调用的三层皮(上) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...

  5. java之JDBC学习总结

    以前一直以为jdbc是很高大上的东西,没想到今天学了jdbc,惊喜来了,just a tool!当然工具是用来帮助人们学习和提供方便的,所以总结了一下,也就是简单的三板斧: first :加载驱动 t ...

  6. C# winform打开文件夹并选中指定文件

    例如:打开“E:\Training”文件夹并选中“20131250.html”文件 System.Diagnostics.Process.Start("Explorer.exe", ...

  7. 解决局域网IP冲突

    进入cmd ipconfig -all 查看现有IP,发现IP不是192.168.1.*的形式,而是192.168.0.*等异常 ipconfig -release  释放现有IP ipconfig ...

  8. vue 请求后台数据 （copy）

    https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...

  9. selectTree & bug

    selectTree & bug 相对路径 & 绝对路径 http://192.168.58.189:8080/hui/#/components/selectTree https:// ...

  10. 【刷题】BZOJ 2134 单选错位

    Description Input n很大,为了避免读入耗时太多, 输入文件只有5个整数参数n, A, B, C, a1, 由上交的程序产生数列a. 下面给出pascal/C/C++的读入语句和产生序 ...