iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JQuery实现Table的tr上移下移功能
  • 325
分享到

JQuery实现Table的tr上移下移功能

2024-04-02 19:04:59 325人浏览 独家记忆
摘要

本文实例为大家分享了Jquery实现Table的tr上移下移的具体代码,供大家参考,具体内容如下 今日份需求:实现表格行的上移下移,并更新排序值,效果如下: 话不多说直接上代码,J

本文实例为大家分享了Jquery实现Table的tr上移下移的具体代码,供大家参考,具体内容如下

今日份需求:实现表格行的上移下移,并更新排序值,效果如下:

话不多说直接上代码,JQ实现挺简单的

html代码

<div>
           <span>
               <button class="layui-btn" id="doUp">上移</button><button class="layui-btn" id="doDown">下移</button>
            </span>
        </div>
        <table class="layui-table" style="width: 800px; margin-top: 3px;">
            <thead>
                <tr>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">姓名</th>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">联系电话</th>
                    <th style="width: 20px; padding: 0px 0px; height: 32px;">排序值</th>
                </tr>
            </thead>
            <tbody id="demo">
                <tr>
                    <td>张三</td>
                    <td>139000000</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>137000000</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>139000000</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>139000000</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>孙七</td>
                    <td>139000000</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>周八</td>
                    <td>139000000</td>
                    <td>6</td>
                </tr>
            </tbody>
</table>

JQ代码

<script>
    $(function () {
        //添加点选中行样式方便查看效果
        $("#demo tr").click(function () {
            if (!$(this).hasClass("selected")) {
                $("#demo tr.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        });
        //上移
        $("#doUp").click(function () {
            Up();
        });
        //下移
        $("#doDown").click(function () {
            Down();
        });
    });
    //上移
    function Up() {
        var currentOrderno;//当前排序值
        var tempOrderno;//临时值
        var current = $("#demo tr.selected");//获取当前行
        currentOrderno = current.find('td:eq(2)').text();
        var prev = current.prev();//当前tr的前一个元素
        if (current.index() > 0) {//大于0表示签名还有行,没有到顶
            //下面调换两行的排序值,类似冒泡排序
            tempOrderno = prev.find('td:eq(2)').text();
            prev.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把选中行插入到上一行的前面
            current.insertBefore(prev);
        }
    }
    //下移
    function Down() {
        var currentOrderno;
        var tempOrderno;
        var current = $("#demo tr.selected");
        currentOrderno = current.find('td:eq(2)').text();
        var next = current.next();//当前tr的下一个元素
        if (next.length > 0) {//大于0表示后面还有行,没有到底
            tempOrderno = next.find('td:eq(2)').text();
            next.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把选中行插入到下一行的后面
            current.insertAfter(next);
        }
    }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JQuery实现Table的tr上移下移功能

本文链接: https://www.lsjlt.com/news/139958.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JQuery实现Table的tr上移下移功能
    本文实例为大家分享了JQuery实现Table的tr上移下移的具体代码,供大家参考,具体内容如下 今日份需求:实现表格行的上移下移,并更新排序值,效果如下: 话不多说直接上代码,J...
    99+
    2024-04-02
  • Element table 上下移需求的实现
    目录前言思路梳理这么多细节问题,产品经理咋不讲清楚写明白呢,喷他!和产品经理一波 battle 后的结果问题清楚了开始复制粘贴,啊呸!来让我们开始改变世界表格数据行拖动上下移表格数据...
    99+
    2024-04-02
  • JQuery实现表格数据行上移与下移
    本文实例为大家分享了JQuery实现表格数据行上移与下移的具体代码,供大家参考,具体内容如下 效果展示 代码实现 <!DOCTYPE html> <html>...
    99+
    2024-04-02
  • jQuery如何实现移除单词功能
    这篇文章主要为大家展示了“jQuery如何实现移除单词功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现移除单词功能”这篇文章吧。移除单词功...
    99+
    2024-04-02
  • jquery实现表格行的上下移动和置顶
    本文实例为大家分享了jquery实现表格行的上下移动和置顶的具体代码,供大家参考,具体内容如下 先上效果图: 点击上移、下移、置顶,可以实现对应的效果。 上代码: <td&g...
    99+
    2024-04-02
  • layui加JQuery怎么实现上下移动效果
    这篇“layui加JQuery怎么实现上下移动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • Jquery+bootstrap实现表格行置顶置底上移下移操作详解
    最近接到产品的一个需求,它是要对数据排序,实际操作中我们要实现表格行置顶置底上移下移操作。项目框架是GUNS框架。 如下图: 我是怎么用Jquery+bootstrap进行实现这些...
    99+
    2024-04-02
  • Vue实现table列表项上下移动的示例代码
    结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容、列内容、以及此行索引值, table上绑定数组 :data=“newsLis...
    99+
    2023-05-16
    Vue table列表项上下移动 Vue table上下移动
  • js实现按钮进行某行上移下移
    本文实例为大家分享了js实现按钮进行某行上移下移的具体代码,供大家参考,具体内容如下 先上个通用简单的代码: <!DOCTYPE html> <html> &...
    99+
    2024-04-02
  • 微信小程序实现列表项上移下移效果
    本文实例为大家分享了微信小程序实现列表项上移下移的具体代码,供大家参考,具体内容如下 需要实现的效果:点击向下按钮时所选项内容和下一项内容交换,向上按钮则相反,删除按钮则点击时删除所...
    99+
    2024-04-02
  • JavaScript实现移动端签字功能
    本文实例为大家分享了JavaScript实现移动端签字功能的具体代码,供大家参考,具体内容如下 一、html部分 <div class="mui-content-padde...
    99+
    2024-04-02
  • Jquery实现多选下拉列表左右移动
    本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码,供大家参考,具体内容如下 jquery实现核心代码 //需求:实现下拉列表选择条目左右选择功能         ...
    99+
    2024-04-02
  • UnityRTS实现相机移动缩放功能
    所谓RTS就是即时战略游戏(Real-Time Strategy Game)。 话不多说直接看一下demo: 相机的层级关系(移动的操作是对父物体进行操作,而缩放是对子物体主相机的...
    99+
    2024-04-02
  • js如何实现移动端图片压缩上传功能
    这篇文章给大家分享的是有关js如何实现移动端图片压缩上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。移动端图片压缩上传功能如何实现?做移动端开发的时候,form里面的fil...
    99+
    2024-04-02
  • js实现表格的隔行变色和上下移动
    本文实例为大家分享了js实现表格的隔行变色和上下移动的具体代码,供大家参考,具体内容如下 话不多说,先看效果图: 点击上移或下移 table样式: <style>  ...
    99+
    2024-04-02
  • jquery+springboot实现文件上传功能
    本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html l...
    99+
    2024-04-02
  • JS实现移动端上下滑动一次一屏
    本文实例为大家分享了JS实现移动端上下滑动一次一屏的具体代码,供大家参考,具体内容如下 功能如下: 头部: 附近、关注、推荐选项卡的切换 左右滑动功能、头部选项卡跟...
    99+
    2024-04-02
  • Android开发中如何使用touch实现移动端的下拉刷新功能
    今天就跟大家聊聊有关Android开发中如何使用touch实现移动端的下拉刷新功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。第一部分:四个touch事件  1.touchstar...
    99+
    2023-05-31
    touch roi android
  • HTML5如何实现移动端点击翻牌功能
    这篇文章主要介绍HTML5如何实现移动端点击翻牌功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果一个大小的两个面,在同一位置上正面的Y轴旋转为0度背面的Y轴旋转180度隐藏被旋转的 div 元素的背面(back...
    99+
    2023-06-09
  • 怎么在HTML5中实现移动端复制功能
    本篇文章为大家展示了怎么在HTML5中实现移动端复制功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。使用clipboard.js实现移动端粘贴复制 clipboard.js是一款很强大的粘贴复制的...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作