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

最新推荐文章于 2022-12-07 16:07:38 发布
最新推荐文章于 2022-12-07 16:07:38 发布
阅读量482 收藏
点赞数
分类专栏： jQuery html 文章标签： jQuery html ViewUI
jQuery 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏
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');" />   <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');" />   <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');" />   <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');" />   <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');" />   <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 += "  <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 += "  <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 += "  <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 += "  <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 += "  <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>
shihuan830619
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery控制表格行移动，序号不变
weixin_30687051的博客
04-29 96
@model Gd.NetSign.Controllers.DTO.SysPamaterDTO @{ ViewBag.Title = "SysPamatList"; //Layout = "~/Views/Masters/Frame.cshtml"; } <script type="text/javascript"> //检索 func...
jQuery实现table中的tr上下移动并保持序号不变的实例代码
10-21
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
01-19
找到函数: function getElementText(config, node) { var text = ; if (!node) return ; if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false; if (config.textExtraction == simple) { if (config.supportsTextContent) { text = node.textContent; } else { if (node.childNod
Table实现tr数据滚动
起床困难户的博客
06-11 1878
先定义对象fontUpRoll及属性 /*文字上下滚动*/function fontUpRoll(dom,tableH){    this.dom = $(dom);    //this.h = this.dom.height(); this.h = tableH;    this.timer = null; this.init();}fontUpRoll.prototype = {    c...
jQuery实现获取table表格第一列值的方法
10-22
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 DOM 操作、事件处理、动画设计以及Ajax交互。在本示例中，我们将深入探讨如何使用jQuery来获取HTML表格的第一列的值。 首先，我们需要了解...
jquery实现上下移动
05-15
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...
jquery 控制table tr 上下移动
微风帆扬
01-15 928
对产品进行排序， 控制table tr 上下移动，贴出来，可能有些朋友会用到。 //下移 function nextMoveTr(obj) { var row = $(obj).parent().parent(); var next = row.next(); if ( next.length
实现table的无限滚动
最新发布
qq_38687592的博客
12-07 825
table无线滚动
JQuery实现table中tr上移下移的示例(超简单)
10-18
下面小编就为大家分享一篇JQuery实现table中tr上移下移的示例(超简单)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JQuery 使用animate让DIV变化或左右移动
04-13
NULL 博文链接：https://sunyf.iteye.com/blog/1717465
JS实现的表格行上下移动操作示例
10-21
主要介绍了JS实现的表格行上下移动操作,涉及javascript针对页面元素节点与属性的相关操作技巧,需要的朋友可以参考下
jQuery表格列自由拖动排序.zip
07-11
<html lang="en"> <head> <meta charset="UTF-8"> <title>表格列自由拖动排序js代码</title> <link href="css/columnDrag.css?3.1.64" rel="stylesheet" type="text/css"> </head> <body>[removed][removed] jQuery表格列自由拖动排序 序列 名称 数量 单价(Q点) 总计(Q点) 1 农场话费A 2 50 100 一款非常不错的表格列自由拖动排序js代码，单击鼠标长按表格列自由拖动排序，互换列排序代码，点击表格头部支持表格数据升降大小排序效果。
jQuery左右移动文字
07-17
使用jQuery实现左右移动文字的特效，可将第一张移动到最后一张，也可以把最后一张移动到第一张。
jQuery操作table数据上移、下移和置顶
xiaozhen0610的博客
08-17 755
jQuery 操作table中的tr换行的步骤如下： 1、获取当前tr var $tr = $(this).parents("tr"); 2、移动tr //上移 $tr.prev().before($tr); //下移 $tr.next().after($tr); //置顶 $(".table").prepend($tr); 在具体例子中的应用 效果 html代码： <!DOCTYPE html> <html> <head lang="en">
jq实现重置序号，上移下移功能
wmeng13的博客
08-19 726
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jquery tablesorter插件的使用
记录
07-23 3456
1、引入两个js文件 jquery-2.1.1.min.js jquery.tablesorter.js2、在js写上 $(“#表id”).tablesorter();即可将表的所有字段进行排序 假设我不需要点击“序号”进行排序，使用如下方法：$.tablesorter.defaults.headers = {0: {sorter: false}};同理假设我不需要点击“序号”和“组别”进行排
使用jQuery移动表格行并保持序号不变的示例
这个示例代码演示了如何使用jQuery库来实现HTML表格（table）中行（tr）的上下移动，并在移动过程中保持行内序号列（td_num）的值不变。这通常用于数据列表的排序操作，例如在网页应用程序中对数据项进行重新排列。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值