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

本文实例为大家分享了JQuery实现表格数据行上移与下移的具体代码，供大家参考，具体内容如下

效果展示

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 条纹表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <style type="text/css">
        .moveUpOrDown {
            background-color: #5BC0DE;
            border-radius: 3px;
            cursor: pointer;
            color: #FFFFFF;
            padding: 2px;
            font-size: 12px;
        }
    </style>
 
    <script type="text/javascript">
        $(function () {
            /**
             * 为 上移 、下移 按钮绑定点击事件
             */
            $("body").on("click", ".moveUpOrDown", function () {
                var text = $(this).text();
                if (text == "上移") {
                    var prevTr = $(this).parent().parent().prevAll();
                    /**如果当前行不是第一行，则上移它*/
                    if (prevTr.length > 0) {
                        var preTemp = prevTr.first();
                        var thisHr = $(this).parent().parent();
                        /**将上一行与本行交互内容，replaceWith 方法内容为 html 内容
                         * 可参考文档：http://www.w3school.com.cn/jquery/manipulation_replacewith.asp*/
                        thisHr.replaceWith("<tr>" + preTemp.html() + "</tr>");
                        preTemp.replaceWith("<tr>" + thisHr.html() + "</tr>");
                    }
                } else if (text == "下移") {
                    var nextTr = $(this).parent().parent().next();
                    if (nextTr.length > 0) {
                        var thisHr = $(this).parent().parent();
                        /**将本行与下一行交互内容，replaceWith 方法内容为 html 内容 */
                        thisHr.replaceWith("<tr>" + nextTr.html() + "</tr>");
                        nextTr.replaceWith("<tr>" + thisHr.html() + "</tr>");
                    }
                }
            });
        });
    </script>
 
</head>
<body>
 
<table class="table table-striped">
    <caption>条纹表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>邮编</th>
        <th>排序</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay1</td>
        <td>Bangalore</td>
        <td>560001</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Sachin1</td>
        <td>Mumbai</td>
        <td>400003</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Uma1</td>
        <td>Pune</td>
        <td>411027</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Tanmay2</td>
        <td>Bangalore</td>
        <td>560001</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Sachin2</td>
        <td>Mumbai</td>
        <td>400003</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Uma2</td>
        <td>Pune</td>
        <td>411027</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Tanmay3</td>
        <td>Bangalore</td>
        <td>560001</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Sachin3</td>
        <td>Mumbai</td>
        <td>400003</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    <tr>
        <td>Uma3</td>
        <td>Pune</td>
        <td>411027</td>
        <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
    </tr>
    </tbody>
</table>
 
</body>
</html>

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

赞 (0)

相关推荐

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

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

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

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

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

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

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

    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实现table中tr上移下移的示例(超简单)

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

  • 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上移下移功能

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

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

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

  • 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 Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

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

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

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

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

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

  • js实现数组内数据的上移和下移的实例

    实例如下所示: var swapItems = function(arr, index1, index2){ arr[index1] = arr.splice(index2,1,arr[index1])[0] return arr } var arr = [1,2,3] var newArr = [] upData (arr, index) { if (this.arr.length > 1 && index !== 0) { newArr = swapItems(arr, inde

  • 基于jQuery实现表格数据的动态添加与统计的代码

    基于jQuery实现表格数据的动态添加与统计的代码

                                                              图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

  • 如何用jquery控制表格奇偶行及活动行颜色

    虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;

  • jQuery实现表格奇偶行显示不同背景色 就这么简单

    jQuery实现表格奇偶行显示不同背景色 就这么简单

    做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便.通常我们是怎么实现的呢?就是在每个tr标签上加css样式. 代码如下所示: <html> <style type="text/css"> .odd { background-color:yellow; } .even { background-color:red; } </style> <body> <table border="

  • JQuery获取表格数据示例代码

    JQuery获取表格数据示例代码

    有这样一个表格:  点击删除执行保存,需要执行onclick事件SaveItem("<%#Eval("ID")>",this); 在JS中 复制代码 代码如下: function SaveItem(id,btn) { var tbl = $(btn).parent().parent().parent(); //table 第二行记录 var dj = tbl.children().eq(1).chilren().eq(3).find("INPU

  • javascript动态添加表格数据行(ASP后台数据库保存例子)

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

  • 表格奇偶行设置不同颜色的核心JS代码

    这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显).只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~ 核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载) 复制代码 代码如下: <script src="jquery-1.7.min.js"></script>

  • jQuery实现表格与ckeckbox的全选与单选功能

    jQuery实现表格与ckeckbox的全选与单选功能

    先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能. 先看看下面的效果: 用户点击头的checkbox时,所有表格数据行的checkbox全选或反选. 当数据行某一行没有选中时,头checkbox去选.当所有数据行的checkbox全选时,头的checkbox也选上. html代码示例,关注高亮部分即可: jQuery代码,可以参考如下: PS:js实现隐藏与显示铵钮功能 表格无数据行时,隐藏下面两个铵钮,反之显示它们,如下面代码示例: jQuery代码: 看看效果:

随机推荐