jq实现重置序号，上移下移功能

最新推荐文章于 2022-12-02 15:06:00 发布
最新推荐文章于 2022-12-02 15:06:00 发布
阅读量726 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmeng13/article/details/99751404
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    td{
        border:1px solid #000;
        text-align: center;
        width: 150px;
        height: 50px;
    }
    a{
        text-decoration: none;
    }
    table{
        border-collapse: collapse;
    }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" class="grade">
        <tbody>
            <tr class="table-tit">
                <td width="22" data-id="td1" class="thorder">
                    <div class="tdheight">序号</div>
                </td>
                <td width="100" data-id="td2" field="sort1" name="主流程节点">
                    <div class="tdheight">
                        主流程节点
                    </div>
                </td>
                <td width="100" data-id="td3" field="sort2" name="子流程">
                    <div class="tdheight">
                        子流程
                    </div>
                </td>
                <td width="150" data-id="td4" field="sort3" name="节点人员">
                    <div class="tdheight">
                    节点人员
                    </div>
                </td>
                <td width="150" class="operation" style="white-space: normal;">
                    <a href="javascript:;" class="add export-btn">操作</a>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">1</div>
                </td>
                <td class="tdheight center">
                    <div class="tdheight">
                        <span class="checkbox">项目申报立项</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                        <span class="checkbox" data-value="flow_edit">项目立项</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                        <div class="project">
                            <div class="td_content">江疏影，杨幂</div>
                        </div>
                    </div>
                </td>
                <td class="operation center">
                        <a href="javascript:;" class="upward">上移</a>
                        <a href="javascript:;" class="down">下移</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">2</div>
                </td>
                <td class="center">
                    <div class="tdheight">
                        <span class="checkbox  curr">项目制定</span>
                    </div>
                </td>
                <td class="center"></td>
                <td class="center"></td>											
                <td class="operation center">
                        <a href="javascript:;" class="upward">上移</a>
                        <a href="javascript:;" class="down">下移</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">3</div>
                </td>
                <td class="center"></td>
                <td class="center">
                    <div class="tdheight">
                        <span class="checkbox curr" data-value="flow_edit">计划制定</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                        <div class="project">
                            <div class="td_content">江疏影，杨幂</div>
                        </div>
                    </div>
                </td>											
                <td class="operation center">
                        <a href="javascript:;" class="upward">上移</a>
                        <a href="javascript:;" class="down">下移</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">4</div>
                </td>
                <td class="center"></td>
                <td class="center">
                    <div class="tdheight">
                        <span class="checkbox" data-value="flow_edit">人员配置</span>
                    </div>
                </td>
                
                <td class="center">
                    <div class="tdheight">
                        <div class="project">
                            <div class="td_content">江疏影，杨幂</div>
                        </div>
                    </div>
                </td>											
                <td class="operation center">
                        <a href="javascript:;" class="upward">上移</a>
                        <a href="javascript:;" class="down">下移</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">5</div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <span class="checkbox">项目汇报</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <span class="checkbox" data-value="flow_edit">人员配置</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <div class="project">
                           <div class="td_content">江疏影，杨幂</div>
                       </div>
                    </div>
                </td>											
                <td class="operation center">
                        <a href="javascript:;" class="upward">上移</a>
                        <a href="javascript:;" class="down">下移</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </td>
            </tr>
            <tr>
                <td class="center">
                    <div class="tdheight">6</div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <span class="checkbox">项目审查</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <span class="checkbox" data-value="flow_edit">人员配置</span>
                    </div>
                </td>
                <td class="center">
                    <div class="tdheight">
                       <div class="project">
                           <div class="td_content">江疏影，杨幂</div>
                       </div>
                    </div>
                </td>											
                <td class="operation center">
                    <a href="javascript:;" class="upward">上移</a>
                    <a href="javascript:;" class="down">下移</a>
                    <a href="javascript:;" class="delete">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script src="jquery.js"></script>
    <script>
        $(function(){

            var currCol=0,currRow=0;
            //删除
            $(document).on("click",".delete",function(){
                $(this).parents("tr").remove();
                resetOrder()
            });
            //重置序号
            function resetOrder(){
                $("table.grade").eq(0).find("tr").each(function(index,item){
                    if(index > 0){
                        $(item).find("td").eq(0).find("div").html(index);
                    }
                })
            }
            //上移
            $(document).on("click",".upward",function(){
                if($(this).parents("tr").length > 0){
                    currRow = $(this).parents("tr").index();  
                }
                if(currRow >= 2){
                    $("table.grade").find("tr").eq(currRow-1).before($("table.grade").find("tr").eq(currRow));
                    resetOrder();
                }else{
                    alert('已经是第一个了')
                }
            });
            //下移
            $(document).on("click",".down",function(){
                if($(this).parents("tr").length > 0){
                    currRow = $(this).parents("tr").index();  
                }
                if(currRow < ($("table.grade").eq(0).find("tr").length - 1)){
                    $("table.grade").find("tr").eq(currRow+1).after($("table.grade").find("tr").eq(currRow));
                    resetOrder();
                }else{
                    alert('已经是最后一个了')
                }
            });

        })
    </script>
</body>
</html>

 

天刚萌萌亮
关注
jquery拖动排序并显示序列号
05-05
jquery拖动排序并设置序列号属性order
jq的灵活上移下移，编辑，删除效果
06-01
标题“jq的灵活上移下移，编辑，删除效果”指的是利用jQuery实现对元素的动态操作，如在列表中进行上移、下移、编辑和删除等常见功能。这些功能在网页界面中很常见，如任务管理器、表格数据排序或列表项管理。 首先...
jquery 实现上移、下移
xcc_2269861428的博客
05-21 961
样式： 点击上移、下移实现显示位置变化。 html部分代码： <table id="order_table"> <tr> <td>HTML5获取地理位置定位信息</td> <td><a href="#" onclick="up(this)">上移</a> <a href="#" class="down" onclick="down(this)">下移</a></td&
jquery 重置表格的序号
sky_xin的专栏
01-20 448
//重置序号 function serial_number(){  //现金  $("#detailCashList td[lang='rowNumFlagClass']").each(function(i,obj){       jQuery(obj).html(i+1);      });      //物资  $("#detailGoodsList td[lang='rowNumFlagCl...
上移功能和下移功能【同时改变行序号和可多次操作，附点击定位到某行位置功能】...
weixin_30295091的博客
05-03 116
最近要做一个上移功能和下移功能，按照思路写完后发现不能多次操作问题 查过度娘后原来是涉及到元素多次绑定与解绑问题，对某行DOM元素进行操作后其父子、同辈层级关系已经改变，导致不能多次操作 解决办法为遍历所有元素，每次元素操作完重新绑定事件，就可以多次操作了 先上有问题的代码，警示自己 $(".main ul li .page .prev").click(function(){ ...
上移，下移 ，置顶，至尾，批量删除更新排序....
渭城朝雨的博客
08-23 4548
声明：所有文章仅仅是个人笔记，不用做教程，只适合自己用（因为我怕不符合大众，容易引起误导） 原理部分： 前提：在数据库设置一个sort，根据数据库数据的条数自增，不可重复。   上移：从前台获取排序字段（我把它定为sort）；根据sort，找到要交换的数据的id备用；然后sort+1，找到相邻的上一条数据，取得他的id；然后进行更新操作，吧要交换的数据的sort变成刚刚查出来的上一条数据的...
jquery实现标签上移、下移、置顶
01-19
eg:如在后台的标签列表中，实现上移、下移、置顶功能 主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，...
jq重置select下拉列表.docx
04-29
jq重置select下拉列表 在网页开发中，select下拉列表是一种常用的表单控件，用于让用户从多个选项中选择一个或多个选项。然而，在某些情况下，我们需要重置select下拉列表，以便在不同的场景下显示不同的选项或清空...
jquery实现列表上下移动功能
12-28
今天我们实现的是一个列表页面上移、下移功能。如图： 当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下： <input type=button onclick=up(); value= 上移 > <input type=...
jquery 实现的 select 上移、下移、左移、右移功能
11-19
实现上移和下移功能的基本思路是： 1. 获取用户当前选中的选项。 2. 检查是否可以进行移动（例如，上移时不能移到第一个选项，下移时不能移到最后一个选项）。 3. 如果可以移动，使用 `.before()` 或 `.after()` ...
jquery删除内容是动态修改序号
weixin_30652879的博客
04-26 164
如图，点击删除图标的时候要删除当前的一条记录，同时界面上的序号要动态的排列好 以下是html结构： jquery实现思路： 首先，需要获取到当前要删除盒子的序号$indexCur，然后遍历父盒子，取出所有盒子的序号，用所有盒子的序号和当前盒子的序号$indexCur进行比较，当序号大于当前要删除盒子的序号时就减一,最后再删除当前盒子就可以了： 转载于:h...
jq实现动态新增删除行
07-19 251
function add(){ var id=($(".txt_1").length)/2; $("#send_time").append('　发布时间' + '' + '　备　　注' + '　增加　删除'); id+=1; } function remove(id
有关排序时，上移，下移的处理思路
06-06 339
在接连几个项目中都用到了类似这种，排序的功能 现在整理一下思路， 就是对第一条记录和最后一条记录的处理办法。 判断是表格中的索引值 如果是index=1的话，就不要操作了， 如果是index>Total的话，也就不要操作了 界面一，如图所示： 必须设置这个字段才可以使用的getRowIndex这个函数的。 转载于:https://www.c...
jquery 删除当前行，重置编号问题
MrWang
09-26 2750
$(function () {         $('input[name=btnDel]').click(function () {             var trNode = $(this).parent().parent();             $($(this).parent().parent().nextAll("tr")).each(function () {   
jQuery实现上移,下移效果
m0_66722601的博客
12-02 1007
jQuery实现上移,下移效果
jquery实现节点上移、下移
llkui
06-09 6693
$().prop('outerHTML')$().html()方法是获取当前节点下的html代码，但并不包括当前节点， js dom里有一个属性outerHTML用来获取当前节点的html代码（包括当前节点），通过jquery的prop()方法可以拿到， 具体实现代码如下 jquery实现节点上移、下移 下移 上移
jquery 实现列表上移、下移功能
热门推荐
小菜鸟的博客
02-03 1万+
由于比较忙，好久没写新的文章了，虽然本人写的文章可能对一些高手来说是小菜一碟，但是对于新手来说还是比较难得，重在为和我一样的小菜鸟提供一个简单的实现方法，以及一个思路罢了。        那么，废话少说，我们开始进入主题。       今天我们实现的是一个列表页面上移、下移功能。如图：        当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下：
jquery上移、下移、置顶、置底、添加、移除事件
Fly的博客
05-21 2026
jquery上移、下移、置顶、置底、添加、移除事件引入jquery.js1.cssul { border: 1px solid #AAAAAA; height: 100px; overflow-y: scroll; } ul li { list-style: none; } a { text-decoration: none; col...
jq实现表格上移/下移/置顶功能
wangle_style的博客
01-03 1862
这里主要是运用了选择器的一些知识，全部代码如下： jQuery实现表格行上移下移和置顶 .demo{width:600px; margin:60px auto 10px auto; font-size:16px} .table {border-collapse: collapse !important;width: 100%;max-width: 100%
用jq实现简单的计算器功能
最新发布
09-14
使用jQuery (简称jq) 实现一个简单计算器功能，主要是通过JavaScript编写事件监听器和函数处理输入和计算操作。下面是一个基本的例子： 首先，在HTML中创建一个简单的计算器界面，包括输入框、数字按钮和运算符按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值