<!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>
分享到：
相关推荐
4. **更新DOM**：一旦排序完成，使用jQuery的`appendTo()`、`insertBefore()`或`insertAfter()`等方法，将元素按照新的顺序插入到DOM中。这样，用户就能在界面上看到排序的结果。 以下是一个简单的示例代码片段，...
本文将深入探讨jQuery的`insertAfter`和`insertBefore`方法，以及如何通过它们来实现节点的插入和移动。 1. **插入节点** `insertAfter`和`insertBefore`方法允许我们在DOM树中指定位置插入新的节点。以`...
jQuery提供了几种方法来实现这些功能，其中包括insertBefore(), insertAfter(), after(), 以及before()。这些方法虽然名字相似，但各自有不同的用途和行为，下面将详细介绍它们之间的区别。 首先，我们要了解的是...
- 使用JQuery的DOM操作方法（如`detach()`和`insertBefore()`或`insertAfter()`）来改变表格行的顺序。 - 最后，可能需要更新列头的样式，以显示当前的排序状态（例如，通过添加一个箭头图标来表示升序或降序）。 ...
这可能涉及到DOM操作，如`insertBefore`和`insertAfter`，或者使用jQuery的`sort`方法配合`detach`和`append`。 5. **防止默认行为**：为了防止浏览器的默认拖拽行为（如选中文本），需要在`mousedown`事件中调用`...
可以使用jQuery的`detach()`方法移除当前图片元素，然后使用`insertBefore()`或`insertAfter()`方法将其插入到正确的位置。 ```javascript var newOrder = function(img, targetImg) { img.detach(); if ($...
以下是一个简化的示例，演示如何使用jQuery实现无刷新的元素排序： ```html <!DOCTYPE html> <title>jQuery上下移动排序 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> .sortable...
- 插入元素：通过`before()`, `after()`, `insertBefore()`, `insertAfter()`等方法，可以在DOM树中移动或插入元素，以实现排序。 3. **动画效果**： - jQuery的`animate()`函数允许我们创建自定义的平滑动画效果...
这可能涉及到获取被拖动行的索引，以及确定新位置的索引，然后使用`insertBefore()`或`insertAfter()`方法插入行。 5. **保存排序状态**：为了保持排序状态，你可能需要在用户停止拖放后，将新的顺序发送到服务器...
在实现图片拖拽排序的过程中，jQuery提供了便捷的API和方法，使得这个功能的实现变得相对简单。 首先，我们需要引入jQuery库和一个用于处理拖放事件的插件，如jQuery UI的draggable和droppable组件。这两个组件分别...
这可能涉及`insertBefore()`或`insertAfter()`方法，或者调整列表项的`innerHTML`。 4. **事件回调**：插件可能提供回调函数，如`start`、`stop`和`change`，开发者可以自定义这些回调以处理拖拽开始、结束以及排序...
例如，可以使用`insertBefore`或`insertAfter`方法来重新排列元素： ```javascript targetCell.before(draggedRow); // 或者 targetCell.after(draggedRow); ``` 5. **数据同步**：如果表格的数据来源于数据库...
可以使用`.append()`或`.insertAfter()`/`.insertBefore()`方法，取决于你希望新行插入的位置。例如，`newRow.appendTo("#myTable")`将新行添加到表格的末尾。 在实际应用中，你可能需要根据用户输入或服务器返回的...
可以使用`.before()`、`.after()`、`.insertBefore()`、`.insertAfter()`等方法将图片元素插入到特定位置，或者使用`.detach()`和`.append()`组合来移除并重新添加图片，从而实现排序效果。此外，如果涉及到复杂的...
在本资源中，我们主要关注的是使用jQuery实现的拖拽排序效果。jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。通过使用jQuery，开发者可以更加高效地创建具有动态...
在排序div时，我们可能会用到`detach()`和`insertBefore()`或`insertAfter()`，这些方法可以避免不必要的DOM重绘，从而提高性能。`detach()`方法会移除元素但保持其事件和数据，而插入方法则能精确控制元素的位置。 ...
要实现元素的上移和下移，我们可以找到目标元素的前一个兄弟元素（上移）或后一个兄弟元素（下移），然后使用`insertBefore()`或`insertAfter()`方法。以下是一个简单的示例： ```javascript function moveUp...
下面我们将详细探讨其中涉及的关键技术和实现方法。 首先，jQuery在页面加载完成后的DOMReady事件处理中扮演了核心角色。通过`$(document).ready(function() {...})`或简写形式`$(function() {...})`，开发者可以...
这通常涉及到DOM操作，比如`insertBefore()`和`insertAfter()`方法来调整元素的位置。同时，可能还需要同步后端数据库或者JSON数据，确保排序状态的持久化。 5. **动画效果**：jQuery提供了丰富的动画效果，例如`...