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

最新推荐文章于 2019-08-14 15:34:33 发布

最新推荐文章于 2019-08-14 15:34:33 发布 · 377 阅读

文章标签：

#jQuery #HTML #ViewUI

Function Code 专栏收录该内容

10 篇文章

订阅专栏

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);
				 	
				 	
				});
				
			}					
		
}