首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript点击表格表头,实现表格排序

现在很多vue/react等js框架配套UI框架,表格自带点击表头排序动能。 后来小想了js/jq 手写的话,逻辑上如何实现。就写了个小demo,这里共享下。 这是一个小白demo。...思路 因为表格数据是遍历数组动态创建,所以可以考虑在点击表头时候,对数据进行排序。 对数据排序需要考虑两个关键点: 对哪个字段进行排序? 是正序(ASC)还是逆序(DESC)?...1)要排序字段 先考虑要对哪个字段进行排序。这个由点击事件决定,点击哪一个表头,就是对那一列数据排序。...因为初始化数据 people是乱序,所以不需要预设sort属性。可以在点击事件排序时,再进行设置。...结语 自此就完成了一个简易版点击表头排序,详细代码详见 table-sort.html。 当然,这不是最简洁方式,有看到小伙使用reverse()方法 JavaScript-点击表格表头进行排序

3.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS实现动态获取当前点击事件id属性值

    原本要实现功能如下: 点击下图播放按钮,要弹窗播放对应视频链接。...整个页面是通过ajax请求最新4部视频进行填充完成,视频列表又是通过template-web.js插件补上去,所以导致所有ID值都是一样,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态ajax请求属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接格式在新打开弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮id值,然后使用button,将链接放在value中 Dom...对象id属性可以获取元素id值。

    25.9K20

    Bootstrap Table表格点击箭头升序降序

    需求: 点击电池电量箭头,按照升序降序排列 点击时间箭头 按照升序降序排列 逻辑: 电量排序在 /device/list 这个搜索接口增加一个sort参数,如果选是时间升序传 timestamp_asc...这个值,如果选是时间升序和电量升序就传 timestamp_asc,battery_asc 这两个值用逗号隔开 定义: 时间排序: timestamp_desc 代表降序 timestamp_asc...以下是优化后代码: $('#mytab').bootstrapTable({ method: 'get', url: basePath + "/device/list", // 请求路径...pageSize: 15, // 单页记录数 pageList: [15, 20, 30], // 可选择单页记录数 queryParams: function (params) { // 上传服务器参数...在queryParams函数中,通过拆分params.sort和params.order来获取排序字段和排序顺序数组。

    43030

    JS点击就会移动

    水一篇之前帮同学写试题 innerHTML 实现 第一反应是很久之前写过,通过不停 innerHTML 以及随机数来达到变换位置做法。...const body = document.getElementsByTagName('body')[0]; //获取 function randomP(){ //随机数函数     return...Math.round(Math.random() * (500 - 1)) + 1; } function spawn(){ //生成一个点击运行 spawn() 函数按钮,同时将随机数代入样式获得坐标....style 实现 将思路调整为点击修改小球坐标就可以。(其实这样才是正常思路,我只是想顺便提一嘴之前重复 innerHTML 玩法很逆天) 可以用 *.style....#ball{ position: absolute; transition: all .5s; } 后记 更完美的做法还得在随机数函数这块获取窗口大小,再根据窗口大小来生成随机数。

    14120

    JS 可编辑表格实现

    本文最后更新于 128 天前,其中信息可能已经有所发展或是发生改变。 1、实现效果 用户点击语文,数学,英语部分单元格,可以实现分数编辑,总分也会随之变化。...先看下效果,如图: 2、设计思路 先通过HTML5+CSS3绘制表格,添加input样式和err提示动画。 给要修改数据单元格添加name属性,给总分那一列单元格添加rname属性。...先获取所有要更改数据单元格,通过for循环遍历,给他们添加单击事件。...定义一个addAnimate方法,表示单元格输入错误时动画提示 定义setCellCilck方法,给单元格添加点击事件 定义一个updateCell()方法,里面传入一个ele参数。...先要获取数据并保存为oldhtml。然后创建一个input标签,并传入oldhtml。

    8.4K20

    vue 点击事件获取当前元素

    在开发中我们可能会使用单击事件去获取当前元素,这样就需要进行传参: 关键词: $event  在括号中输入这个关键词,然后在方法中就可以使用以下方法去获取你当前所需要使用元素 //当前点击元素...e.target //是你绑定事件元素 e.currentTarget //获得点击元素前一个元素 e.currentTarget.previousElementSibling.innerHTML...//获得点击元素第一个子元素 e.currentTarget.firstElementChild //获得点击元素下一个元素 e.currentTarget.nextElementSibling...//获得点击元素中id为string元素 e.currentTarget.getElementById("string") //获得点击元素string属性 e.currentTarget.getAttributeNode...('string') //获得点击元素父级元素 e.currentTarget.parentElement //获得点击元素前一个元素第一个子元素HTML值 e.currentTarget.previousElementSibling.firstElementChild.innerHTML

    1.8K10
    领券