<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
<style type="text/css">
.editText
{
border-width:1px;
border-top-style:none;
border-left-style:none;
border-right-style:none;
border-bottom-style:solid;
border-color:#030;
width:100%;
}
</style>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
function moveUp(obj)
{
var current=$(obj).parent().parent();
var prev=current.prev();
if(current.index()>1)
{
current.insertBefore(prev);
}
}
function moveDown(obj)
{
var current=$(obj).parent().parent();
var next=current.next();
if(next)
{
current.insertAfter(next);
}
}
</script>
</head>
<body>
<table class="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>字段英文名</td>
<td>字段中文名</td>
<td>字段数据类型</td>
<td>列宽</td>
<td>是否显示</td>
<td>是否作为查询条件</td>
<td>调整顺序</td>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="textfield" class="editText" id="textfield"></td>
<td> </td>
<td><input type="text" name="textfield5" id="textfield5"></td>
<td><input type="checkbox" name="checkbox" id="checkbox"></td>
<td><input type="checkbox" name="checkbox5" id="checkbox5"></td>
<td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="textfield2" id="textfield2"></td>
<td> </td>
<td><input type="text" name="textfield6" id="textfield6"></td>
<td><input type="checkbox" name="checkbox2" id="checkbox2"></td>
<td><input type="checkbox" name="checkbox6" id="checkbox6"></td>
<td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="textfield3" id="textfield3"></td>
<td> </td>
<td><input type="text" name="textfield7" id="textfield7"></td>
<td><input type="checkbox" name="checkbox3" id="checkbox3"></td>
<td><input type="checkbox" name="checkbox7" id="checkbox7"></td>
<td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="textfield4" id="textfield4"></td>
<td> </td>
<td><input type="text" name="textfield8" id="textfield8"></td>
<td><input type="checkbox" name="checkbox4" id="checkbox4"></td>
<td><input type="checkbox" name="checkbox8" id="checkbox8"></td>
<td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
在网页开发中，jQuery是一个非常流行的...以上就是使用jQuery实现表格行上下移动互换的基本步骤。这个功能在很多数据管理场景中都非常实用，通过结合HTML、CSS和jQuery，可以构建出更加动态和用户友好的网页应用。
在本项目中，"jQuery实现列表上下移动置顶+带入数据库文件" 是一个适合初学者的教程，它教你如何使用jQuery库来实现一个功能，允许用户在列表中上下移动条目并将其置顶，同时将这些操作同步到数据库中。这个教程包含...
本示例主要关注如何利用jQuery实现在HTML表格（table）中移动行（tr）的同时保持行内的序号不变，这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点： 1. jQuery选择器与DOM操作： jQuery提供了...
结合以上步骤，我们可以创建一个完整的jQuery插件，用于实现表格内容的上下移动。这个插件可能包含以下结构： ```javascript (function($) { $.fn.upDownMove = function() { // 绑定事件处理 $(document).on('...
本文将深入探讨如何使用jQuery来实现表格行（tr）的添加、删除和上下移动，同时提供相关源码供参考。 一、jQuery基本操作 在开始之前，我们需要确保已引入jQuery库。通常在HTML文件头部通过`<script>`标签引入...
总结来说，通过本示例，我们可以学习到如何使用JavaScript来对HTML表格进行行的上下移动操作，包括了获取节点、遍历节点和节点交换等基础DOM操作，这些知识对于进行页面动态交互设计是至关重要的。
在本教程中，我们将深入探讨如何利用jQuery技术实现表格（table）元素的上下移动，以此来改变表格行（tr）的顺序，以满足用户自定义排序的需求。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
总结来说，这个知识点展示了如何利用jQuery实现表格行的上下移动，提高了用户对数据表的操作便利性。通过绑定事件处理器，我们可以轻松地实现行的动态互换，而无需刷新整个页面，从而提供了更流畅的用户体验。
综上所述，jQuery插件在表格分页中的应用为开发者提供了便利，通过选择合适的插件并结合实际需求进行定制，可以轻松实现高效、美观的分页效果。在实际开发中，应根据项目特性和性能需求，合理选择和配置插件，以达到...
标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM（Document Object Model）元素，特别是HTML表格的行（tr）进行上下移动的功能。这种功能常见于数据管理界面，允许用户通过交互调整...
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
使用jQuery为表格添加合计行，方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名
jquery实现div上下移动 ;" onclick="up(this);">上移 ;" onclick="down(this);">下移 内容一 ;" onclick="up(this);">上移 ;" onclick="down(this);">下移 内容二 </div>
在网页设计中，当表格数据过多...总之，通过`jQuery`实现表头固定表格内容滚动效果，可以提升用户在浏览大量数据时的体验。在实际应用中，可以根据项目需求对上述代码进行调整和优化，以达到最佳的视觉效果和性能表现。