jquery 修改排序

最新推荐文章于 2023-01-06 14:32:10 发布
最新推荐文章于 2023-01-06 14:32:10 发布
阅读量127 收藏
点赞数
文章标签： javascript php python ViewUI
原文链接：https://my.oschina.net/rikkilovelife/blog/138422
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <title>My JSP ""index.jsp"" starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../jquery/js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    //删除
    function del(t){
      $(t).parent().parent().remove();
    }
    
    //上移
    function up(t){
     var i=$(t).parent().parent().index();//当前行的id
     if(i>1){//不是表头，也不是第一行，则可以上移
       var tem0=$(t).parent().parent().html();
       var tem1=$(t).parent().parent().prev().html();
       $(t).parent().parent().prev().html(tem0);
       $(t).parent().parent().html(tem1);
     }
    }
    //下移
    function down(t){
     var l=$("#MyTB tr").length;//总行数
     var i=$(t).parent().parent().index();//当前行的id
     if(i<l-1){//不是最后一行，则可以下移
       var tem0=$(t).parent().parent().html();
       var tem1=$(t).parent().parent().next().html();
       $(t).parent().parent().next().html(tem0);
       $(t).parent().parent().html(tem1);
     }
    }   
    function add(t){
     var tem0=$(t).parent().parent().html();
     $(t).parent().parent().append("<tr>"+tem0+"</tr>");
    }
    </script>
    </head>
    <body>
    <table id="MyTB">
        <tr>
            <td>xxxxxxxx</td>
            <td>xxxxxxxx</td>
            <td>xxxxxxxx</td>
            <td>xxxxxxxx</td>
            <td> </td>
        </tr>
        <tr>
            <td>11111111</td>
            <td>11111111</td>
            <td>11111111</td>
            <td>11111111</td>
            <td>
                <input type="button" value="上" οnclick="up(this)" />
                <input type="button" value="下" οnclick="down(this)" />
                <input type="button" value="删" οnclick="del(this)" />
                <input type="button" value="加" οnclick="add(this)" />
            </td>
        </tr>
        <tr>
            <td>22222222</td>
            <td>22222222</td>
            <td>22222222</td>
            <td>22222222</td>
            <td>
                <input type="button" value="上" οnclick="up(this)" />
                <input type="button" value="下" οnclick="down(this)" />
                <input type="button" value="删" οnclick="del(this)" />
                <input type="button" value="加" οnclick="add(this)" />
            </td>
        </tr>
        <tr>
            <td>33333333</td>
            <td>33333333</td>
            <td>33333333</td>
            <td>33333333</td>
            <td>
                <input type="button" value="上" οnclick="up(this)" />
                <input type="button" value="下" οnclick="down(this)" />
                <input type="button" value="删" οnclick="del(this)" />
                <input type="button" value="加" οnclick="add(this)" />
            </td>
        </tr>
        <tr>
            <td>44444444</td>
            <td>44444444</td>
            <td>44444444</td>
            <td>44444444</td>
            <td>
                <input type="button" value="上" οnclick="up(this)" />
                <input type="button" value="下" οnclick="down(this)" />
                <input type="button" value="删" οnclick="del(this)" />
                <input type="button" value="加" οnclick="add(this)" />
            </td>
        </tr>
        <tr>
            <td>55555555</td>
            <td>55555555</td>
            <td>55555555</td>
            <td>55555555</td>
            <td>
                <input type="button" value="上" οnclick="up(this)" />
                <input type="button" value="下" οnclick="down(this)" />
                <input type="button" value="删" οnclick="del(this)" />
                <input type="button" value="加" οnclick="add(this)" />
            </td>
        </tr>
    </table>
</body>
</html>

转载于:https://my.oschina.net/rikkilovelife/blog/138422

weixin_33943836
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 排序, jquery 动态修改列
03-17
NULL 博文链接：https://xylonwang.iteye.com/blog/554018
jQuery拖拽排序
12-23
在IT领域，jQuery拖拽排序是一种常见的交互设计技术，它允许用户通过鼠标拖放操作来改变元素的顺序，常用于列表、网格等需要动态调整顺序的场景。jQuery库以其简洁的API和强大的功能，使得实现这种功能变得相对简单...
jQuery动态改变元素顺序
u010520692的专栏
05-09 7513
该实现主要是利用after（）方法和before（）方法来实现元素的
jquery 点击实现升序降序图标切换
落花人独立，微雨燕双飞。
06-27 2974
(本文适合小白/学渣,适合不想动脑子只想复制黏贴的) 需求: 有一个查询结果,返回的是表格的形式,点击表头任何一列,都能实现升序/降序的UI变换,同时表格内容该列也升序降序排列.支持分页. 实现步骤: 1.css .table-sort { display: inline-block; width: 10px; height: 20px; margin-l...
jQuery拖拽排序布局插件
06-10
在本主题中，我们关注的是一个基于jQuery的拖拽排序布局插件，它允许用户通过鼠标操作对元素进行动态排序，为网页应用提供了丰富的交互体验。以下是对这个插件的详细解释： 1. **jQuery基础**：首先，理解jQuery的...
jQuery可排序的多图片上传
06-01
3. **图片排序**：用户可以通过拖放或者按钮操作改变图片的顺序。这需要监听DOM元素的拖放事件（`dragstart`, `dragover`, `drop`等），并使用jQuery来更新DOM结构，反映图片的新顺序。同时，排序的结果需要保存在...
php+jquery拖曳排序
06-28
在Web开发中，拖曳排序（Drag and Drop Sorting）是一种常见的交互功能，允许用户通过鼠标拖动元素来改变它们的顺序。在这个“php+jquery拖曳排序”的主题中，我们将探讨如何结合PHP后端和jQuery前端库实现这一功能...
jquery设置html元素上移、下移以及对应序号的重新排序操作
大石化鸟的博客
01-06 740
jquery设置html元素上移、下移以及对应序号的重新排序操作
jquery数组(排序)
weixin_30532759的博客
08-21 522
HTML： View Code 1 <h3>字符串数组排序前</h3> 2 <div id="show5"></div> 3 <h3>排序后</h3> 4 <div id="show6"></div> jquery： View Code var animals = [...
jquery 动态控制表格，添加，删除，上移，下移，排序
无问西东的博客
08-20 2554
这个功能的实现主要运用了jquery  的遍历和DOM操作 .prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 .next()获得匹配元素集合中每个元素紧邻的同辈元素。 .find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 .eq() 将匹配元素集合缩减为位于指定索引的新元素。 after()在匹配的元素之后插入内容。 befor
jQuery实现的排序方法
weixin_34260991的博客
07-14 1032
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery实现table 列-拖曳排序
宋先森的博客
11-08 6051
今天因项目需要，table 列-拖曳排序，在巨人的肩膀上，自己做了个小小的demo，与众分享。如图所示，目的是能将所有列随意排序。后台代码 就是为了传送数据到前台展示。 @RequestMapping(value = "/propertiesSort", method = RequestMethod.GET) public String propertiesSort(String op
sort 自定义排序使用方法
qq_41199502的博客
07-14 9588
sort()排序函数是c++头文件include &lt;algorithm&gt;中的函数，它采用的是一种类似于快排的排序方式，时间复杂度  n*log2(n)。可以对 浮点数，整数，字符，字符串，结构体进行排顺序，排序方法不限于从大到小和从小到大两种，它可以根据使用者的排序规则进行排序。 比较简单的： 按从大到小  bool compare(int a,int b) { return ...
JQuery实现置顶、置底、向上、向下、取消排序功能
IT后浪的博客
12-20 5768
sort.html 序号 内容 排序 1 内容一 置顶 href="javascript:void(0)" class="upbtn">上 href="javascript:void(0)" class="downbtn">下 href="javascript:void(0)" class="b
在前台利用jquery对dom元素进行排序
LZJLZJLZJLZJLZJLZJ的专栏
05-23 8107
一直以来，都不知道可以在前端对dom元素进行排序，一次在博客园阅读别人的博客的时候，突然发现可以在前端利用jquery的sort函数可以对dom元素进行排序，然后自己试验了下，果不其然，实现了排序的功能。下面以对一个表格里某一列的值作为排序依据，对表格的行进行排序。详见： 假设有一个表格，大概的代码如下： 每个tr的第三列显示的都是数字，我们就以这数字列作为排序依据，方法就是利用jquery的sor
jquery改变元素上下排列的顺序
weixin_34205826的博客
09-20 1785
1 &lt;!doctype html&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;meta name="viewport" 6 content="width=device-width, user-sc
jquery option选中元素后可以鼠标拖动排序
最新发布
07-30
在jQuery中，我们可以使用select元素的change事件来监测选项的改变。当某个选项被选中后，可以使用jQuery的draggable和sortable方法来实现拖动排序的效果。 首先，我们需要将select元素转换为可排序的列表。我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值