<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS控制HTMLDOM表格行上下移动</title>
<style type="text/css">
<!--
td { text-align:center;font-size:12px;padding:3px;}
www.111cn.cn
-->
</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>
分享到：
相关推荐
总结来说，通过本示例，我们可以学习到如何使用JavaScript来对HTML表格进行行的上下移动操作，包括了获取节点、遍历节点和节点交换等基础DOM操作，这些知识对于进行页面动态交互设计是至关重要的。
首先，我们需要在HTML中为表格的每一行添加一个唯一的ID，然后编写JavaScript函数，通过选择特定行并调整其在DOM中的位置来实现上移或下移。例如，当用户点击“上移”按钮时，JavaScript会找到当前选中行的前一行，...
本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能，以及相关辅助操作。 首先，`js操作table行的上下移动，置顶置底`这个主题涉及到的主要技术是DOM操作，事件监听和数组处理。DOM（Document ...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
总的来说，这个压缩包中的资源提供了JavaScript和HTML结合实现表格行上下移动的实例，对于学习和理解如何通过JavaScript增强HTML表格的交互性具有很好的参考价值。通过深入研究和实践，开发者可以进一步提升自己在...
本文将深入探讨如何使用jQuery来实现表格行（tr）的添加、删除和上下移动，同时提供相关源码供参考。 一、jQuery基本操作 在开始之前，我们需要确保已引入jQuery库。通常在HTML文件头部通过`<script>`标签引入...
在本教程中，我们将深入探讨如何利用jQuery技术实现表格（table）元素的上下移动，以此来改变表格行（tr）的顺序，以满足用户自定义排序的需求。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
在JavaScript原生开发中，实现表格（Table）行的拖动排序是一项常见的需求，尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序，提升用户体验。以下是一个详细的知识点说明...
在JavaScript（JS）编程中，处理HTML表格是常见的任务，特别是在动态交互的Web应用中。本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先...
"js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先，我们需要理解HTML表格的基本结构，包括`<table>`,`<tr>`,`<th>`和`<td>`等元素。`...
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
本文主要介绍了使用jQuery实现表格行上下移动和置顶效果的方法，通过在前端页面上通过点击不同的链接实现行数据的动态排序，包含了核心代码和对代码的详细解释。 知识点一：引入jQuery库 在开始编写JavaScript代码...
本示例主要关注如何利用jQuery实现在HTML表格（table）中移动行（tr）的同时保持行内的序号不变，这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点： 1. jQuery选择器与DOM操作： jQuery提供了...
本文将深入探讨jQuery如何实现表格（table）行的上下移动、排序功能，以及用户名验证和JavaScript读取XML的技术细节。 一、jQuery实现表格行上下移动 在网页中，表格常常用于展示结构化数据。jQuery可以通过获取...
总结来说，这个知识点展示了如何利用jQuery实现表格行的上下移动，提高了用户对数据表的操作便利性。通过绑定事件处理器，我们可以轻松地实现行的动态互换，而无需刷新整个页面，从而提供了更流畅的用户体验。
在这个场景下，我们将关注如何利用DOM节点来实现表格内容的移动，如上下移动，以及表格的添加和删除功能。 首先，我们需要理解表格在HTML中的结构。一个基本的表格由`<table>`标签定义，其中包含`<tr>`（行）和`...
在网页开发中，jQuery是一个非常流行的...以上就是使用jQuery实现表格行上下移动互换的基本步骤。这个功能在很多数据管理场景中都非常实用，通过结合HTML、CSS和jQuery，可以构建出更加动态和用户友好的网页应用。
在JavaScript编程中，拖动表格行和列...总的来说，实现JavaScript拖动表格行和列的功能需要理解DOM操作、事件处理、CSS定位以及可能的第三方库的运用。通过实践和调试，你可以创造出更加动态和交互丰富的Web表格应用。