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

    1.vim编辑器 vim操作命令 --在命令模式下进行 pageup 往上翻页 pagedown 往下翻页 H 移动到屏幕首行 gg 移动光标到文档的首行 前面加数字n表示移动到n行内容 G 移动到文 ...

  2. abcdocker 的博客

    技术参考总结 abcdocker 的博客 09月 3 篇 20日 Centos7 图形化创建KVM 10日 Nginx 代理Google 进行*** 10日 mac 安装装逼神器cmatrix 08月 ...

  3. 2013337朱荟潼 Linux第一章读书笔记——Linux内核简介

    一.Unix历史 二.Linux足迹 类Linux系统.非商业化产品.用途广泛 三.操作系统和Linux内核简介 1.操作系统 (1)是指在整个最基本功能系统中负责完成最基本功能和系统管理的部分. ( ...

  4. Qrcode生成二维码的参数总结 及最小尺寸的测试

    Qrcode生成二维码,做过很多实验,探索最小规格的二维码到底是多少尺寸,和最高规格的二维码到底是多大尺寸.现在我总结总结: 有两种思路: 1.生成规格高的二维码,然后压缩到自己想要的尺寸的二维码.这 ...

  5. ElasticSearch5.6.1 + 中文分词(IK)

    在安装ElasticSearch 需要先安装java 的 jdk 可以通过  命令来确认是否已经安装了 java -version 如果没有安装可以使用 yum 直接安装通过. 先通过命令查看yum源 ...

  6. beta 圆桌桌 4

    031602111 傅海涛 1.今天进展 后台接口大部分完善,并完成交互 2.存在问题 部分接口不稳定 3.明天安排 完成全部接口的交互 4.心得体会 小问题真多,要一个一个解决 031602115 ...

  7. GS 服务器端开启webservice 远程调试的方法

    1. 修改 安装目录下 web.config的文件. 一般目录为: C:\Program Files\GenerSoft\bscw_local\web.config 为了保证安全想把文件备份一下. 2 ...

  8. mysql 好用的sql语句

    1.删除某个库里面全部的表 ,先在mysql库中执行:  SELECT CONCAT('drop table ',table_name,';') FROM information_schema.`TA ...

  9. 在Docker环境下部署高可用的Eureka注册中心

    Eureka Server的同步遵循着一个非常简单的原则,只要有一条边将节点连接,就可以进行信息传播和同步 由于Eureka Server进行相互注册的方式来实现高可用的部署,所以我们只需要将Eure ...

  10. caffe多任务、多标签

    解决的目标问题:多分类问题,比如车辆的外形和颜色,苹果的大小和颜色:多任务:车牌角点的定位和车牌的颜色.定位在技术上属于回归,车牌颜色判断则属于分类. 技术点 caffe默认是单输入任务单标签的,也就 ...