`
busing
  • 浏览: 41338 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery实现的可增加,删除行,可多行上下移动表格

阅读更多
var rowId=1;
//添加行
function addRow()
{
	//因为表格每行都有一些效果,不得不处理下id,和其他没有关系
	rowId++;
	var replaceString=$("#lb tr:first-child").html().replace("value=tr1","value=tr"+rowId).replace("rowId=\"1\"","rowId=\""+rowId+"\"").replace("id=jstj_sdjs1","id=jstj_sdjs"+rowId).replace("id=jstj_zdjs1","id=jstj_zdjs"+rowId).replace("id=jsgs_sdjs1","id=jsgs_sdjs"+rowId).replace("id=jsgs_zdjs1","id=jsgs_zdjs"+rowId);
	var rowTemplet="<tr onMouseOver='changeto()' onMouseOut='changeback()' id='tr"+rowId+"'>"+replaceString+"</tr>";
	$("#lb tr:last-child").after(rowTemplet);
}

//删除行
function delRow()
{
	if($("#lb tr").length<=1 || $("input[type='checkbox'][checked]").length==$("#lb tr").length)
	{
		alert('至少保留一行');	
		return;
	}
	
	$("input[type='checkbox'][checked]").each(
		function(){
		$("#"+$(this).val()).remove();   //此处可以修改成 $(this).parent().parent().remove(); 使得 和id没有任何关系
		});
}


//上移行
function upOrDownTr(isUp)
{
		if(isUp){
		$("input[type='checkbox'][checked]").each(
		 function(){
		 var checkedTR=$(this).parent().parent();
		var upTR=checkedTR.prev();
		if(upTR.html()==null)
		{
			alert("已是第一行");
				return;	
		}
			checkedTR.insertBefore(upTR);
		$(this).attr("checked",true);
		});					
		}
		else
		{	
			var reverseChecked= jQuery.makeArray($("input[type='checkbox'][checked]")).reverse();	
			$.each(reverseChecked,function(i,v){
				 var checkedTR=$(this).parent().parent();
					var upTR=checkedTR.next();
					
					if(upTR.html()==null)
					{
						alert("已是最后一行");
						return;	
					}
				 checkedTR.insertAfter(upTR);
				 	$(this).attr("checked",true);
				 	
				 	
				});
				
			}					
		
}

 

1
3
分享到:
评论

相关推荐

    jquery做的table行上下移动,互换

    接下来,我们编写jQuery脚本来实现行的移动: ```javascript $(document).ready(function() { // 上移行的事件处理 $("#myTable").on("click", ".up", function() { var row = $(this).closest("tr"); if (row....

    Jquery实现可编辑的表格

    本教程将深入探讨如何使用jQuery实现一个可编辑的表格功能,这在数据展示和用户交互中非常常见。 首先,我们需要理解表格(Table)的基础结构。HTML中的`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头...

    jquery 表格自动滚动 类似于新闻

    // 移动表格,使其顶部行变为下一行 tbody.animate({ scrollTop: $(rows[currentRow]).position().top }, scrollSpeed, function() { setTimeout(function() { currentRow++; scrollTable(); }, pauseTime); ...

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

    在JavaScript原生开发中,实现表格(Table)行的拖动排序是一项常见的需求,尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序,提升用户体验。以下是一个详细的知识点说明...

    jquery可编辑表格

    本主题聚焦于“jquery可编辑表格”,这是一个实用的功能,常用于数据管理和用户输入场景,如在线表单、数据库前端展示等。在jQuery的帮助下,我们可以轻松创建动态、交互性强的表格,让用户可以直接在表格中进行编辑...

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    在本文中,我们将探讨如何实现JS组件Bootstrap Table的表格多行拖拽效果。这是一个常见的需求,特别是在需要用户交互和自定义排序的Web应用中。Bootstrap Table是一个强大的表格插件,它提供了许多内置功能,包括...

    js实现表格部分固定

    为了解决这个问题,我们可以利用JavaScript(js)来实现表格部分固定的特性,保持横向标题行和纵向标题列在页面滚动时始终可见。以下是一些关键知识点和实现步骤: 1. **固定表头(Fixed Header)** - 使用CSS定位...

    超实用的jQuery代码段

    3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3 使用toggleClass()函数切换页面元素的样式...

    原生javascript实现拖拽改变table表格行高(html)

    表格由`&lt;table&gt;`元素定义,内部包含`&lt;tr&gt;`(表格行)、`&lt;td&gt;`(表格数据单元格)以及可选的`&lt;th&gt;`(表头单元格)。要实现行高的动态调整,我们需要选定可以被拖动的元素,通常是表格行`&lt;tr&gt;`。 接下来,我们需要...

    flexigrid表格功能丰富

    综上所述,Flexigrid作为一个强大的jQuery插件,提供了丰富的表格操作功能,包括行移动、行选中事件处理、行删除、DWR支持以及灵活的数据获取方式,使得在Web应用中构建交互性强且功能丰富的表格变得更加容易。...

    jsp表头相对固定的2种方法

    2. **FrozenColumns**:这是另一款专为表格固定列设计的jQuery插件,它同样能够实现横纵坐标的固定。 通过上述两种方法,开发者可以根据项目需求选择合适的方案实现`JSP`中的表头固定。在实际应用中,还需考虑兼容...

    jQuery基于Bootstrap的表格编辑插件Bootstable.zip

    Bootstable是一款基于jQuery和Bootstrap框架的表格编辑插件,它为网页中的数据表格提供了丰富的交互功能,使得用户可以在表格内直接进行数据的编辑、增删查改操作,极大地提升了用户体验和工作效率。在Web开发中,...

    懒人原生纯css实现多行文字均保持垂直居中效果.zip

    标题中的“懒人原生纯css实现多行文字均保持垂直居中效果”是指一种无需依赖JavaScript库(如jQuery)或HTML5特定属性,仅通过CSS实现的多行文本垂直居中的技术。这种技术在网页设计中十分常见,因为用户界面的对齐...

    jQuery Mobile 表单

    jQuery Mobile 是一个流行的前端开发框架,专为移动设备设计,提供了丰富的交互元素和美观的界面。在移动应用或响应式网站中,表单是必不可少的组成部分,用于收集用户输入的数据。jQuery Mobile 提供了专门针对移动...

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

     6.1.6 多行表格  6.1.7 不相等的表格  6.1.8 springboard  6.2 可折叠的内容块  6.3 可折叠的设置  6.4 使用css渐变进行样式化  6.5 总结 第7章 创建可主题化的设计  7.1 主题基础知识  7.2 ...

    表格的样式.rar表格的样式.rar

    3. **表格布局**:使用`display`属性可以调整表格布局,如`display: table`保持默认表格布局,`display: block`可使表格按块级元素显示,`display: flex`或`grid`则可以实现更灵活的网格布局。 4. **表格边框合并**...

    jquery.jqGrid-4.5.4

    - **多选与操作**:提供多行选择功能,同时支持行级别的操作按钮,如删除、更新等。 - **导入导出**:可以将数据导入或导出为CSV、Excel、XML、JSON等多种格式。 - **国际化**:支持多种语言,便于全球化应用开发...

    Tabulator是一款非常实用的基于jQueryUI的表格插件

    4. **交互性**:Tabulator支持多种交互功能,如可编辑单元格、行拖放、选择多行、弹出菜单等,提升了用户体验。用户可以直接在表格内进行数据编辑,并且这些更改可以实时保存回数据源。 5. **富文本和自定义组件**...

    AmazeUI 表格

    7. **扩展性**:AmazeUI表格具有良好的扩展性,可以与Ajax、jQuery插件等结合,实现动态加载、异步操作等功能。 8. **样式定制**:AmazeUI提供了丰富的预设样式,同时允许开发者根据需求自定义表格样式,满足个性化...

Global site tag (gtag.js) - Google Analytics