`
daha33
  • 浏览: 52470 次
社区版块
存档分类
最新评论

源:表格中行的上移下移并排序

阅读更多
该表格是作为排序用的,表格中每条记录前有一个radio,选择可以对该条记录进行向上向下移动并排序,添删改可以另加。

javascript代码
<script type="text/javascript">
	function upList(){				//向上排序
		var span = document.getElementById("trIds"); //得到要排序的tr所在的span,当然也可以设置要排序的tr的name。
		var form = document.forms[0];
		
		if(form.radios == undefined || form.radios == "")	//如果没有记录就不操作,防止没有记录点击排序按钮报错
		{
			return;
		}
		
		for(var i=0; i<form.radios.length;i++){
			if(form.radios[i].checked){
				if((i-1) < 0){
					alert("已经到最顶端!");
				}else{
					var value1 = form.authOrders[i].value;          //得到选择行的序号
					var value2 = form.authOrders[i-1].value;      //得到选择行前一行的序号
					span.insertBefore(span.childNodes[i],span.childNodes[i-1]);   //进行行的对调,选择行与前一行对换位置
					form.authOrders[i].value = value1;     //将开始选择行的序号赋给现在所在行					form.authOrders[i-1].value = value2;    //将开始选择行前一行的序号赋给现在的所在行,及排序号不变,行对调
					form.radios[i-1].checked = true;     //将开始选择行的前一行的radio设置为选中状态,表示向上移了一行
				}
			}
		}
	}
	
	function downList(){			//向下排序
		var span = document.getElementById("trIds");
		var form = document.forms[0];
		
		if(form.radios == undefined || form.radios == "")	//如果没有记录就不操作
		{
			return;
		}
		
		for(var i=0; i<form.radios.length;i++){
			if(form.radios[i].checked){
				if((i+1) > (form.radios.length-1)){
					alert("已经到最底端!");
				}else{
					var value1 = form.authOrders[i].value;      //得到选择行的序号
					var value2 = form.authOrders[i+1].value;    //得到选择行后一行的序号
					if((i+2) > (form.radios.length-1)){     
						span.insertBefore(span.childNodes[i+1],span.childNodes[i]);  //进行行的对调,选择行与后一行对换
						form.radios[i+1].checked = true;   //对调完后一行被选择,表示向下移动了一行
					}else{
						span.insertBefore(span.childNodes[i],span.childNodes[i+2]);
						form.radios[i+1].checked = true;
					}
					form.authOrders[i].value = value1;     //将开始选择行的序号赋给现在所在行	
					form.authOrders[i+1].value = value2;    //将开始选择行后一行的序号赋给现在的所在行,及排序号不变,行对调
					break;
				}
			}
		}
	}
</script>


jsp代码,用了struts标签
<table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
	  	<td colspan="4">
	  		<br>
	  		<input type="button" value="↑" class="Increase" onclick="upList()"/><br>&nbsp;<br>
	  		<input type="button" value="↓" class="Increase" onclick="downList()"/><br>&nbsp;<br> 	
	  	</td>
  	   </tr>
       <span id="trIds"><!--可以不用span,用tr的name,js代码要做相应的修改-->
       <logic:present name="nodeAuthList">
       	 <logic:iterate id="list" indexId="indexId" name="nodeAuthList">	
       	   <tr name="trs"> 
       		<td>
       			<!-- 用于排序的隐藏字段 -->
		   		<input type="hidden" name="authOrders" value="<bean:write name='indexId'/>"/>
		   		<input type="radio" name="radios"/>&nbsp;  <!--可以添加click事件改变选择行的颜色-->
	   		</td>
	   		<td>
       			<bean:write name="list" property="nodeTypeTemp"/>&nbsp;
       		</td>
       		<td>
       			<bean:write name="list" property="authTypeTemp"/>&nbsp;
       		</td>
       	   </tr>
       	 </logic:iterate>
       	</logic:present>
       </span>
 </table>   
分享到:
评论

相关推荐

    GridView控件行上移、下移

    GridView控件是ASP.NET ...通过以上步骤,您可以实现GridView控件中行数据的上移和下移功能,为用户提供更灵活的数据管理体验。这个功能在需要用户自定义排序顺序的场景中非常有用,如任务管理、日程安排等应用程序。

    jQuery实现表格行上移下移和置顶的方法

    本文主要介绍了使用jQuery实现表格中行上移、下移以及置顶的方法,这涉及到对网页元素特别是表格单元进行DOM操作的技巧。在当前的Web开发过程中,对页面元素的操作变得十分重要,尤其是在动态的交互式网页设计中。...

    JS可拖动排序的表格

    这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序,提升数据管理的便捷性。下面我们将深入探讨如何使用JS实现这样的功能。 首先,实现可拖动的表格,需要用到HTML5的`&lt;draggable&gt;`属性和`dragstart`, `...

    js原生实现表格行的拖动排序

    这个功能允许用户通过鼠标拖动来改变表格中行的顺序,提升用户体验。以下是一个详细的知识点说明: 1. **HTML表格基础**: 在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`表示单元格,`&lt;th&gt;`表示...

    UITableView 系列四 :项目中行的操作 (添加移动和删除)(实例)

    当用户与表格交互时,我们通常需要更新数据源以反映这些变化,并调用UITableView的相关方法来刷新界面。 1. **添加行**: 要在UITableView中添加行,首先需要在数据源数组中添加新数据。这通常是通过调用`insert...

    js操作table中tr的顺序实现上移下移一行的效果

    本文主要介绍如何使用JavaScript来实现表格中行的上移和下移效果。在详细讲解实现思路之前,先来明确一些关键知识点。 首先,HTML中的表格是由行(tr)和单元格(td)组成的二维结构。要动态操作行的顺序,可以利用...

    获取el-table表格中选中行的数据

    获取el-table表格中选中行的数据

    计算机基础教案——Word表格制作技术.pdf

    鼠标放在边框线上可选中行或列;在单元格左边框单击可选中该单元格。 - 编辑表格:可以通过“插入行/列”添加,通过“删除行/列”删除。 - 编辑数据:增、删、改操作与编辑文档文本相同。 - 格式化数据:与文档...

    《计算机基础与应用(第五版)》项目四-任务3-表格的创建与编辑.pptx

    最后,计算表格数据并排序: 1. 利用函数计算:Word 2010支持简单的计算功能,如求和、平均值等,可以帮助快速统计表格内的数值。 2. 表格排序:可以根据需要对表格数据进行升序或降序排序,便于分析和查找特定信息...

    改变table中行的背景

    ### 改变table中行的背景 在网页设计与开发中,使用HTML表格(`&lt;table&gt;`)是一种常见的布局方式。对于希望使表格更具交互性和视觉吸引力的开发者来说,通过鼠标悬停事件来改变表格行的背景颜色是一种简单而有效的...

    银行:评建行中行理财子公司获批:大行领头,落地提速.pdf

    银行:评建行中行理财子公司获批:大行领头,落地提速.pdf

    如何操作办公中的电子表格的说明.ppt

    - 行高与列宽:调整表格中行和列的尺寸。 - 斜线表头:用于一个单元格表示两个或更多列标题。 - 单元格拆分与合并:改变单元格结构,适应不同数据组织需求。 4. **电子表格的通用操作**: - 文件操作:包括新建...

    表格拖动排序插件TableDnD

    这个插件使得用户可以通过鼠标拖动来改变表格中行的顺序,提供了直观且用户友好的交互体验。在网页设计和开发中,TableDnD常用于数据管理界面,特别是那些需要用户自定义顺序或者频繁调整数据排列的应用场景。 首先...

    银行理财双周报:中行建行理财子获批,净值型产品发行提速.pdf

    银行理财双周报:中行建行理财子获批,净值型产品发行提速.pdf

    GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西

    GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西 在这里有讲解: http://blog.csdn.net/cefriend/archive/2008/04/07/2256732.aspx

    javaScript+html实现表格上下移动.zip

    这个压缩包"javaScript+html实现表格上下移动.zip"包含的资源很可能是用于演示如何通过JavaScript来实现在HTML表格中行的上下移动功能。这个功能对于动态交互的数据展示非常有用,比如用户可以调整数据的顺序或进行...

    C# windows datagridview表格行上下拖动示例

    `DragEnter`和`DragOver`事件处理拖放过程中行的插入和删除,确保行在正确的位置上。 此外,我们还需要在`MainForm_Load`事件中禁用自动调整行高度的功能,因为这可能会影响行拖动的视觉效果: ```csharp private ...

    DataTableRowUpAndDown

    在"上移"和"下移"的场景中,用户可以方便地调整表格中行的顺序,这对于那些需要根据需求动态调整数据顺序的项目特别有用。比如,当用户需要更改某个条目的优先级或者按照特定逻辑排列数据时,这个功能就显得尤为重要...

Global site tag (gtag.js) - Google Analytics