<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>javascript 动态上移或下移 table表中的 td列</title>
<style type="text/css">
<!--
td { text-align:center;font-size:12px;padding:3px;}
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
<tbody>
<tr>
<td width="25%">1</td>
<td width="25%">11</td>
<!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
<td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>3</td>
<td>33</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>4</td>
<td>44</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>5</td>
<td>55</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
</tbody>
</table>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
//遍历element的子结点
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
//判断是否是空白文本结点，如果是，则删除该结点
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//获得表格对象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a){
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是第一行，则与上一行交换顺序
if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a){
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是最后一行，则与下一行交换顺序
if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
//获取父结点
var _parent=node1.parentNode;
//获取两个结点的相对位置
var _t1=node1.nextSibling;
var _t2=node2.nextSibling;
//将node2插入到原来node1的位置
if(_t1)_parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//将node1插入到原来node2的位置
if(_t2)_parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
//-->
</script>
分享到：
相关推荐
在网页开发中，表格（Table）是展示数据常用的一种元素，尤其在管理界面或数据分析页面中，用户可能需要对表格中的行进行上移或下移操作，以调整数据的顺序。这种功能通常通过JavaScript实现，因为JavaScript允许...
以上代码示例实现了动态构建的表格，包括添加、删除、置顶、置底、上移和下移的功能。需要注意的是，这只是一个基础实现，实际应用中可能需要考虑更多细节，如错误处理、多选行操作、用户交互反馈等。在实际项目中，...
这个"jQuery表格上移下移置顶代码.zip"文件包含了一个利用jQuery实现的功能，允许用户对表格中的数据行进行上移、下移和置顶操作，这在数据管理或展示界面中非常常见，比如在后台管理系统或者数据分析应用中。...
本主题将详细探讨如何使用jQuery实现表格（table）中的行上移、下移和置顶功能，这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前，确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用： ...
input type=button value=上移 onclick=moveUp(this)/></td> <td><input type=button value=下移 onclick=moveDown(this)/></td> <td><input type=button value=上移 onclick=moveUp(this)/></...
在实际应用中，可能还需要考虑行的边界条件，例如当试图将第一行上移或最后一行下移时，应防止出现无效的操作。此外，为了提供更好的用户体验，可以考虑添加一些视觉反馈，比如禁用无法操作的按钮，或者在交换行时...
测试代码展示了如何在页面上创建一个带有上下移按钮的表格行，并通过点击按钮调用上面定义的JavaScript函数`setRowUp`和`setRowDown`来实现行的动态上移和下移。 ### 总结 文章通过实例代码向我们展示了如何使用...
HTML表格编辑器的上移下移功能，可能是通过JavaScript实现的，它允许用户选择某一行并改变其在表格中的位置。这通常涉及对`<tr>`元素的DOM操作，如`insertBefore()`或`appendChild()`方法，将行元素在DOM树中的位置...
当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下： <input type=button onclick=up(); value= 上移 > <input type=button onclick=down(); value= 下移 > <table ...
在本文中，我们将探讨如何使用jQuery Easyui的Datagrid组件实现单行的上移和下移功能，并且在操作后保存这些移动的结果。jQuery Easyui Datagrid是一个强大的数据展示工具，它提供了丰富的交互性和自定义选项，使得...
如果要实现元素的移上或移下，我们通常会操作`<tr>`元素。 1. **元素选择与遍历**： 使用`document.getElementById()`或`document.querySelector()`、`document.querySelectorAll()`来选取需要操作的表格元素。...
我们可以为每一行添加两个按钮（上移和下移），并绑定jQuery事件处理器： ```html <td>内容1</td> <td>内容2</td> <td> 上移 下移 </td> ``` 接下来，我们编写jQuery脚本来实现行的移动： ```javascript ...
4. **上移/下移行**：上移和下移行涉及到调整行在DOM树中的位置。如果要上移一行，可以先保存当前行，然后将其前一个兄弟节点移动到当前位置，最后将当前行插入到前一个节点之前。下移操作类似，只是交换顺序。例如...
<tr><td>1</td><td>11</td><td>(0)" onclick="moveUp(this)">上移</a></td><td>(0)" onclick="moveDown(this)">下移</a></td> <!-- ... --> </table> ``` 接下来是JavaScript部分。这里有两个主要的函数：`move...
本篇文章主要介绍了如何使用jQuery来实现网页表格中数据行的动态上移、下移以及置顶操作。这些操作能够帮助我们在前端直接通过用户交互完成数据的顺序调整，同时配合简单的动画效果，使操作过程更加生动有趣。该方法...
本项目涉及的知识点是使用jQuery实现表格数据行的上移、下移和置顶功能，这对于创建动态交互式的网页表格十分有用。下面将详细讲解这个功能的实现原理和相关技术。 首先，我们需要一个HTML表格作为基础结构。表格...
根据给定的文件信息，我们可以总结出一系列关于使用JavaScript（简称JS）操作HTML中的`<table>`元素，尤其是对表格的行（`<tr>`）和列（`<td>`或`<th>`）进行增删操作的关键知识点。以下是对这些功能的详细解释： #...
本资源“jQuery实现的表格上移下移置顶操作特效源码.zip”提供了一种利用jQuery来操作HTML表格的方法，使得用户可以实现表格行的上移、下移以及置顶功能，这在数据展示和管理中非常实用，特别是在需要动态调整数据...
这段代码的工作原理是，当用户点击上移或下移按钮时，jQuery会选择对应的行，并将其相对于兄弟元素的位置进行调整。`insertBefore()`和`insertAfter()`方法用于在DOM中重新定位元素。 为了可视化这个过程，我们可以...