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

本文实例为大家分享了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>

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

(0)

相关推荐

  • jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果是则给点相应提示,好让操作者知道发生了什么事情. 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添

  • JQuery实现table中tr上移下移的示例(超简单)

    表格样式 <table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td

  • JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

    本文实例讲述了JS与jQuery实现ListBox上移,下移,左移,右移操作功能.分享给大家供大家参考,具体如下: 先来看看Javascript版选择下拉菜单互移且排序操作: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • JQuery实现表格数据行上移与下移

    本文实例为大家分享了JQuery实现表格数据行上移与下移的具体代码,供大家参考,具体内容如下 效果展示 代码实现 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Bootstrap 实例 - 条纹表格</title>     <link rel="stylesheet" href="https

  • jQuery表格行上移下移和置顶的实现方法

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. 运行效果图: HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr&

  • jQuery基于排序功能实现上移、下移的方法

    本文实例讲述了jQuery基于排序功能实现上移.下移的方法.分享给大家供大家参考,具体如下: 效果 思路, 跟相邻元素,互换sort. 前提是每一个元素都有自己的sort值,不为零. <tr id="{sh:$vo.id}"> <td> <span onclick="up(this);" class="glyphicon glyphicon-arrow-up text-danger up" style="c

  • jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索引editIndex. 2.撤销用到了rejectChanges(). 3.保存时使用getRows()或者getChanges(). getChanges()主要是获取添加或编辑的数

  • jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果

    1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-index属性等. 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等.将来保存的时候,就是通过取这个属性值找某一行的数据的. function

  • jQuery实现表格行上移下移和置顶的方法

    本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti

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

    本文实例为大家分享了JQuery实现Table的tr上移下移的具体代码,供大家参考,具体内容如下 今日份需求:实现表格行的上移下移,并更新排序值,效果如下: 话不多说直接上代码,JQ实现挺简单的 HTML代码 <div>            <span>                <button class="layui-btn" id="doUp">上移</button><button class=&qu

  • jquery遍历table的tr获取td的值实现方法

    html代码: <tbody id="history_income_list"> <tr> <td align="center"><input type="text" class="input-s input-w input-hs"></td> <td align="center"><input type="text&q

  • 利用jqgrid实现上移下移单元格功能

    前言 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. 在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 下面话不多说了,来一起看看详细的介绍吧 jqgrid上移下移单元格 1.上移,下移按钮 <a href="javascript:void(0)" rel="external nofollow" rel="external nofol

  • jquery对table中各数据的增加、保存、删除操作示例

     像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的:比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了! 添加按钮 复制代码 代码如下: <input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTe

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • jQuery实现html table行Tr的复制、删除、计算功能

    本文实例讲述了jQuery实现html table行Tr的复制.删除.计算功能.分享给大家供大家参考,具体如下: 添加行: function addtr(){ var tr = $("#tb tr").eq(0).clone(); tr.appendTo("#tb"); //tr.insertBefore("#tb tr:last"); } <table id="tb"> <tr> </tr>

  • js操作table中tr的顺序实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了目标行再直接加进去,最后把整体的html赋值给div完成效果 js代码如下 //使行向上一行 function setRowUp(obj) { if (obj.parentNode.parentNode.rowIndex != 1) { var tab = obj.parentNode.parent

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

随机推荐