jquery实现手动排序insertAfter和insertBefore用法

最新推荐文章于 2022-04-12 17:56:00 发布
最新推荐文章于 2022-04-12 17:56:00 发布
阅读量218 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_6607/article/details/82121809
本文介绍如何利用jQuery库中的insertAfter和insertBefore方法来实现网页表格中行的上移和下移功能。通过点击按钮，用户可以方便地调整表格行的顺序，此功能适用于需要灵活排序内容的应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>insertAfter和insertBefore用法</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.up_btn').click(function(){
$(this).closest('tr').insertBefore($(this).closest('tr').prev());
})
$('.down_btn').click(function(){
$(this).closest('tr').insertAfter($(this).closest('tr').next());
})
})
</script>
</head>

<body>
<table width="600" border="1">
<tr>
<td>序号</td>
<td>标题</td>
<td>排序</td>
</tr>
<tbody>
<tr bgcolor="#0066CC">
<td>1</td>
  <td>1</td>
<td>
<input type="button" value="上移" class="up_btn" />
<input type="button" value="下移" class="down_btn" />
</td>
</tr>
<tr bgcolor="#006666">
<td>2</td>
  <td>2</td>
<td>
<input type="button" value="上移" class="up_btn" />
<input type="button" value="下移" class="down_btn" />
</td>
</tr>
<tr bgcolor="#993333">
<td>3</td>
  <td>3</td>
<td>
<input type="button" value="上移" class="up_btn" />
<input type="button" value="下移" class="down_btn" />
</td>
</tr>
<tr bgcolor="#CC6600">
<td>4</td>
  <td>4</td>
<td>
<input type="button" value="上移" class="up_btn" />
<input type="button" value="下移" class="down_btn" />
</td>
</tr>
<tr bgcolor="#999999">
<td>5</td>
  <td>5</td>
<td>
<input type="button" value="上移" class="up_btn" />
<input type="button" value="下移" class="down_btn" />
</td>
</tr>
</tbody>
</table>

</body>
</html>

使用insertAfter()方法在现有元素后添加一个新元素
09-04
为javascript添加insertAfter()方法即在现有元素后添加一个新元素，示例如下，大家不妨学习下
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
11-22
本文将深入探讨jQuery的`insertAfter`和`insertBefore`方法，以及如何通过它们来实现节点的插入和移动。 1. **插入节点** `insertAfter`和`insertBefore`方法允许我们在DOM树中指定位置插入新的节点。以`...
java-相对排序-insertBefore()和insertAfter()方法
weixin_44109689的博客
12-06 490
我需要对列表进行排序,其中谁的项目是对象,这些对象描述了应如何相对于同一列表中的其他项目对项目进行排序.这些项目是动态加载的,因此我无法确保它们从一开始就被订购. 我应该看什么清单？ ArrayList没有像insertBefore()或insertAfter()这样的方法. LinkedLists可能会但我不确定LinkedLists的Java实现是否提供了此类方法.有任何想法吗？ 注...
JavaScript 插入节点insertBefore()
景上 的博客
07-01 3941
插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法: insertBefore(newnode,node);参数: newnode: 要插入的新节点。 node: 指定此节点前插入节点。实现创建一个新li标签，内容为”php”,并将新创建的li插入到内容为HTML的标签前。<!DOCTYPE HTML> <html> <head>
jQuery基础（DOM篇，append()，after()，prepend()，insertAfter()，节点删除，遍历方法each()）...
weixin_30533797的博客
05-13 199
1.DOM创建节点及节点属性 创建流程比较简单，大体如下： - 创建节点(常见的：元素、属性和文本) - 添加节点的一些属性 - 加入到文档中 流程中涉及的一点方法： - 创建元素：document.createElement - 设置属性：setAttribute - 添加文本：innerHTML - 加入文档：appendChild 2...
jQuery insertBefore
weixin_33989780的博客
03-09 113
jQuery insertBefore mark下 $("tbody tr",'.test-table').each(function() { 　$("<td>test</td>").insertBefore("td.last-item",this);//this是当前行，但insertBefore，两个参数并不代...
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
10-21
jQuery提供了几种方法来实现这些功能，其中包括insertBefore(), insertAfter(), after(), 以及before()。这些方法虽然名字相似，但各自有不同的用途和行为，下面将详细介绍它们之间的区别。 首先，我们要了解的是...
jQuery中append、insertBefore、after与insertAfter方法注意事项
10-28
在使用jQuery进行DOM操作时，append、prepend、before和after方法是经常使用的，它们可以帮助开发者以不同的方式动态地修改页面内容。同时，appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...
jQuery中insertAfter()方法用法实例
10-24
最后，本文通过一个简单的实例介绍了jQuery中insertAfter()方法的用法，通过这个例子我们可以了解这个方法能够实现的功能、使用的语法以及应用的技巧。希望本篇介绍的内容能够对大家在使用jQuery进行前端开发时有所...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...
WGH100817的博客
05-30 288
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。[html] view plain copy print?<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js中常...
插入节点insertBefore()
weixin_30416497的博客
07-02 144
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <ul ...
jquery文档添加操作之 insertAfter() ，insertBefore() .appendTo() .append()方法的使用与区别
weixin_45846805的博客
05-24 1205
先看看上述方法的用法定义： .appendTo() .append() 剪切操作：将元素追加到父元素的最后 .prependTo() .prepend() 剪切操作：元素的开头添加元素 .insertBefore().before() 剪切操作：都是将某个元素插入到指定元素的前面 .insertAfter() .after() 剪切操作：都是将某个元素插入到指定元素的后面 上述方法的效果一致 在jQuery需要用到链式操作的是，就有区别：
JQuery DOM节点操作
shaddce的博客
05-05 146
1． jQueryDOM节点 （1）.jQuery节点的创建:()函数处理，()函数处理，()函数处理，(“html结构”)， jQuery创建的节点是一个jQuery对象，比js更加简洁。 （2）. 通过jQuery的$()函数创建div节点并添加属性与文本内容，通过jQuery中的append()方法将新创建的节点添加到body元素中 2.节点插入 append()与appendTo()方法 ...
JQuery实现表格自动增加行，对新行添加事件
apollokk的专栏
07-30 1万+
效果： 一：原始页面
HTML动态为复杂table添加、删除行
weixin_43288034的博客
11-26 965
HTML动态为复杂table添加、删除行   首先申明一下，我是一个做后台的java开发，但是由于公司工作的调整，我的工作中还是会涉及到前端页面的开发。就在最近的一个业务中，有这样一个需求；如下图：   看到绩效指标一列后面的操作按钮了吗？没错，我们要做的就是希望用户能根据自己的需求自行添加和删除行，但是这个表格的结构也算是比较复杂的了，对于我一个只会一点点前端技术的人来说，确实还是有点困难的，我也找了公司的前端大佬帮忙，但是他们都嫌太复杂了不肯帮忙。没办法，自己的工作还是得靠自己才行。下面来看看我的解决
js 动态操作table 表格 在指定行后添加行 删除行
清叶 的专栏
11-16 9412
//根据ID删除table行 var tr_id = $("#addTable>tbody>tr:last").attr("id"); if(tr_id == '123'){ $('#'+tr_id).remove(); //删除ID=123的行 } //在指定ID行下面添加行 var tr = 'add4add4add4add4addaddaddadd'; var zhid
使用jquery来给tr进行重新排列
洛少的专栏
12-28 5234
//向上移动 function moveFileUp(obj){ //alert(trId); var objParentTR = $(obj).parent().parent(); var prevTR = objParentTR.prev(); if (prevTR.length > 0) { var name=prevTR.attr('name'); if(name=='
jquery 实现拖拽排序
xiaoshengjinbu的博客
04-12 1478
<!DOCTYPE html> <html> <head> <title>jQuery UI sortable()实现拖动排序</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <scrip...
jqGrid 排序功能
热门推荐
@风的博客
10-18 4万+
主要添加 sortable：true，sortorder ："asc"   某些字段不要拍戏功能的话 只要在字段中加入 sortable：false； jqgrid排序的功能是：在点击每一列的列名时，会根据你所点击列名的name去排序，jqgrid会将此列的字段传到server中，在colModel中sortable: true是默认的,如果不写此字段默认是支持排序的，如果不想此字段进行排序则s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值