`
shihuan830619
  • 浏览: 582155 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery实现table中的tr上下移动并保持序号不变

jQueryhtml 
阅读更多
jQueryMoveTr.html代码如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>jQuery-bhang</TITLE>
  <script type="text/javascript" src="jquery-1.6.2.js"></script>
  <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>
 </HEAD>

 <BODY>
	<table id="show_table_id" border="1">
		<tr>
			<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td>
			<td>aaaaaaaaaa</td>
			<td>@@@@@@@</td>
			<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> &nbsp; <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
			<td>注释1</td>
		</tr>
		<tr>
			<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td>
			<td>bbbbbbbbbbbbb</td>
			<td>#########</td>
			<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> &nbsp; <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
			<td>注释2</td>
		</tr>
		<tr>
			<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td>
			<td>cccccccccccc</td>
			<td>$$$$$$$$$$$$</td>
			<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> &nbsp; <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
			<td>注释3</td>
		</tr>
		<tr>
			<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td>
			<td>ddddddddddddd</td>
			<td>&&&&&&&&&&&&&</td>
			<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> &nbsp; <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
			<td>注释4</td>
		</tr>
		<tr>
			<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td>
			<td>eeeeeeeeeeeeee</td>
			<td>***************</td>
			<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> &nbsp; <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
			<td>注释5</td>
		</tr>
	</table>
 </BODY>
</HTML>


jquery-rlutil-1.6.2.js代码如下： 
[color=green]/*
 * 功能：使带有序号的table表格中的tr内容上下移动并保持序号不变
 *
 * 函数使用要求：
 * 1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
 * 2、上移按钮的name属性必须是 btn1，下移按钮的name属性必须是 btn2
 * 3、要有一个id=show_table_id的table元素，这个table元素里面放置n个tr套td的信息，其中有一个td的text是input框，input的value是序号值
 * 4、要求所有text内容为序号的td的class属性为 td_num
 *
 * @param: obj为一个button的对象
 * @param: table_self_id为table的id值
 * @param: td_self_id为内容是input序号框的td的class的属性值
 */
[/color]
[color=green]//上移指令[/color]function prevMoveTrCommand(obj, table_self_id, td_self_id){
	[color=green]/*
	//不带表头的写法	var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child");   //获得第一个tr的对象	var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();   //获得第一个tr里的input的value的序号	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  //获得本身tr的序号
    */[/color]
	[color=green]/*带表头的写法*/[/color]    var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)");   [color=green]/*获得第二个tr的对象*/[/color]	var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();   [color=green]/*获得第一个tr里的input的value的序号*/[/color]	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  [color=green]/*获得本身tr的序号*/[/color]
	
	if(objVal == firstTrVal){  [color=green]/*判断是否在把第一行向上移*/[/color]		return;
	}else{
		prevMoveTrOpra(obj, td_self_id);  [color=green] /*调用上移操作方法*/[/color]	}
}
[color=green]/*上移操作*/[/color]function prevMoveTrOpra(obj, td_self_id){
	var $jqObj = jQuery(obj).parent().parent().clone();  [color=green]/*获得并复制本身tr的信息*/[/color]	var $jqSublObj = jQuery(obj).parent().parent().prev();   [color=green]/*获得上一个tr的信息*/[/color]
	$jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1);   [color=green] /*把上一个tr序号加1*/[/color]	jQuery(obj).parent().parent().html("").append($jqSublObj.html());   [color=green]/*把本身tr清空并插入上一个信息*/[/color]	
	$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1);    [color=green]/*把本身tr序号减1*/[/color]	$jqSublObj.html("").append($jqObj.html());   [color=green]/*把上一个tr清空并插入临时保存的tr信息*/[/color]
	$jqObj.remove();   [color=green]/*删除复制的多余jQuery对象*/[/color]}

[color=green]/*下移指令*/[/color]function nextMoveTrCommand(obj, table_self_id, td_self_id){
	var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child");   [color=green]/*获得最后一个tr的对象*/[/color]	var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val();   [color=green]/*获得最后一个tr的序号*/[/color]	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  [color=green]/*获得本身tr的序号*/[/color]
	if(objVal == lastTrVal){  [color=green]/*判断是否想把最后一行往下移*/[/color]		return;
	}else{
		nextMoveTrOpra(obj, td_self_id);    [color=green]/*调用下移操作方法*/[/color]	}
}
[color=green]/*下移操作*/[/color]function nextMoveTrOpra(obj, td_self_id){
	var $jqObj = jQuery(obj).parent().parent().clone();  [color=green]/*获得并复制本身tr的信息*/[/color]	var $jqSiblObj = jQuery(obj).parent().parent().next();   [color=green]/*获得下一个tr的信息*/[/color]	
	$jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1);    [color=green]/*把下一个tr序号减1*/[/color]	jQuery(obj).parent().parent().html("").append($jqSiblObj.html());   [color=green]/*把本身tr清空并插入下一个tr信息*/[/color]
	$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1);    [color=green]/*把本身tr序号加1*/[/color]	$jqSiblObj.html("").append($jqObj.html());   [color=green]/*把下一个tr清空并插入临时保存的tr信息*/[/color]
	$jqObj.remove();    [color=green]/*删除复制的多余jQuery对象*/[/color]}


jswension.html代码如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>JavaScript拼接版</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  <script type="text/javascript" src="jquery-1.6.2.js"></script>
  <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>

  <script type="text/javascript">
	
	[color=green]/*onclick=prevMoveTrCommand(this,'show_table_id','td_num');  这个地方千万不要带空格，否则乱码*/[/color]
	jQuery(document).ready(function(){
		var str = "";
		str += "<tr>";
		str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='1' /></td>";
		str += "<td>aaaaaaaaaa</td>";
		str += "<td>@@@@@@@</td>";
		str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
		str += "&nbsp; <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
		str += "<td>注释1</td>";
		str += "</tr>";
		str += "<tr>";
		str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='2' /></td>";
		str += "<td>bbbbbbbbbbbbb</td>";
		str += "<td>#########</td>";
		str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
		str += "&nbsp; <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
		str += "<td>注释2</td>";
		str += "</tr>";
		str += "<tr>";
		str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='3' /></td>";
		str += "<td>cccccccccccc</td>";
		str += "<td>$$$$$$$$$$$$</td>";
		str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
		str += "&nbsp; <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
		str += "<td>注释3</td>";
		str += "</tr>";
		str += "<tr>";
		str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='4' /></td>";
		str += "<td>ddddddddddddd</td>";
		str += "<td>&&&&&&&&&&&&&</td>";
		str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
		str += "&nbsp; <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
		str += "<td>注释4</td>";
		str += "</tr>";
		str += "<tr>";
		str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='5' /></td>";
		str += "<td>eeeeeeeeeeeeee</td>";
		str += "<td>***************</td>";
		str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
		str += "&nbsp; <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
		str += "<td>注释5</td>";
		str += "</tr>";

		$("#show_table_id").html(str);
	});
		
  </script>
 </HEAD>

 <BODY>
	<table id="show_table_id" border="1"></table> 
 </BODY>
</HTML>
0
顶
0
踩
分享到：
| Axis2整合Spring连接Jdbc数据源发布
评论
2 楼 tkl211 2012-12-06  
有个问题，点 第二行的上移的时候，不行
1 楼 liutao841204 2012-08-06  
正需要！谢谢！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现上下移动

    本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...

    jQuery实现获取table表格第一列值的方法

    在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 DOM 操作、事件处理、动画设计以及Ajax交互。在本示例中，我们将深入探讨如何使用jQuery来获取HTML表格的第一列的值。 首先，我们需要了解...

    原生js table表格自动排序效果

    在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery或lodash）的解决方案。下面我们将详细探讨这个功能的实现原理和相关知识点。 首先，`index.html`文件是网页的结构部分，...

    JS 排序输出实现table行号自增前端动态生成的tr

    3. **行号自增**：在提供的代码中，使用jQuery实现了一个名为`number`的函数，它遍历所有`.numberClass`的元素并设置其内容为索引值加1。如果你不使用jQuery，可以改用原生JavaScript的`querySelectorAll`和`forEach...

    基于jQuery替换table中的内容并显示进度条的代码

    在这个示例中，我们将探讨如何使用jQuery将HTML表格（table）中的数值转换为直观的进度条，以增强数据展示的效果。这个例子特别适用于处理由asp.net GridView控件生成的表格数据。 首先，我们需要了解HTML结构。在...

    jQuery动态操作表单示例【基于table表格】

    ### jQuery动态操作表单示例【基于table表格】 #### 1....通过本文的介绍，读者应能理解如何使用jQuery来动态地操作基于table表格的表单，并应用于实际开发中，以提升Web应用的交互性和用户体验。

    JS实现table表格数据排序功能(可支持动态数据+分页效果)

    在JavaScript中实现表格数据排序和分页功能是Web开发中常见的需求，特别是在处理大量数据时。这个场景中，我们讨论的是如何用JavaScript实现一个表格的动态数据排序，并且支持分页，主要涉及到以下知识点： 1. **...

    针对后台列表table拖拽比较实用的jquery拖动排序

    `fixHelperModified`函数用于创建一个辅助帮助器元素，它在拖动过程中保持与原始元素相同的比例和宽度。当用户开始拖动表格行时，这个辅助元素会跟随鼠标移动。 `updateIndex`函数在拖放操作停止时被调用，它的作用...

    jquery实现购物车基本功能

    在本文中，我们将深入探讨如何使用jQuery来实现一个基本的购物车功能。购物车系统是电商网站不可或缺的一部分，它允许用户选择并管理他们想要购买的商品。以下是一个简单的jQuery实现，涵盖了购物车的基本操作，包括...

    jQuery ajax动态生成table功能示例

    在成功获取到服务器返回的数据后，jQuery选择器被用于选取页面中特定的元素，本例中是ID为tableAjax的div元素。随后，通过$.html()方法将构建好的tableStr字符串添加到这个div中，完成动态表格的显示。 4. Ajax与...

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组...

    jQuery实现表格行和列的动态添加与删除方法【测试可用】

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能，这对于创建交互式数据展示页面至关重要...

    django js 实现表格动态标序号的实例代码

    在本文中，我们将探讨如何使用Django和JavaScript（JS）来实现表格中的动态序号功能。这个功能在数据展示时非常实用，特别是当表格数据有增删操作时，序号可以自动更新，保持顺序。 首先，我们需要一个HTML模板，...

    原创jquery插件treeTable.pdf

    总之，jQuery 插件 TreeTable 提供了一种简便的方式，将传统的表格转变为具有树形结构的表格，便于组织和展示层次化数据，同时保持了良好的性能和多样的视觉风格。通过灵活的配置选项，开发者可以轻松地适应各种项目...

    jqeury实现列表拖拽排序

    本文将详细介绍如何使用jQuery来实现列表拖拽排序，并确保后台数据同步更新。 #### 一、前端实现 ##### JSP页面元素 在JSP页面中，我们可以通过以下步骤来实现列表拖拽功能： 1. **定义可拖拽元素**：首先需要...

    jquery动态增加删减表格行特效

    - 在增加新行时，从隐藏的模板表格`#tab11`中克隆一行，并将其添加到实际使用的表格`#dynamicTable`中。 - 更新行内的序号字段（即`&lt;input type="text" name="NO"&gt;`中的值）。 - 设置最大允许显示的行数，以避免...

Magicbox
Global site tag (gtag.js) - Google Analytics