阿里的模拟笔试题，当时时间有限没写出来，其实是因为自己对原生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. kali linux 安装Nessus

    Nessus 介绍: Nessus 是目前全世界最多人使用的系统漏洞扫描与分析软件.总共有超过75,000个机构使用Nessus 作为扫描该机构电脑系统的软件. 下载Nessus,我的是64为,我选择 ...

  2. 微软职位内部推荐-Senior Software Engineer-DUT

    微软近期Open的职位: Document Understanding and Task (DUT) team in STCA focuses on semantic understanding an ...

  3. maven util 类 添加 service

    直接关键代码: public class DictionaryUtil { // 以下的处理,是为了在工具类中自动注入service // 前提是在applicationContext.xml中,将该 ...

  4. Individual Project Records

    At the midnight of September 20, I finished my individual projcet -- a word frequency program. You c ...

  5. Linux内核的启动过程分析

    秦鼎涛 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.实验目的及要求: 使用gdb跟踪调试内核从s ...

  6. Python3 - DBUtils 和 pymysql 整合

    之前一篇Python 封装DBUtils 和pymysql 中写过一个basedao.py,最近几天又重新整理了下思绪,优化了下 basedao.py,目前支持的方法还不多,后续会进行改进.添加. 主 ...

  7. laravel 处理自定错误页面，如404，500,501,502,503,504等等

    laravel 5.0 版本下,修改pp/Exceptions/Handler.phppublic function render($request, Exception $e) { if ($e i ...

  8. 第一天进入博客这个神奇的领域 在此%%%erosun

    第一条博客水一水    等会要找一下调博客模板 独立动手,丰衣足食

  9. MySQL服务器最大连接数的合理设置

    MySQL服务器的连接数并不是要达到最大的100%为好,还是要具体问题具体分析,下面就对MySQL服务器最大连接数的合理设置进行了详尽的分析,供您参考. 我们经常会遇见“MySQL: ERROR 10 ...

  10. ssh框架配置过程

    1.pom.xml配置依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...