JSP中动态添加或删除table的行

最新推荐文章于 2024-06-26 17:58:07 发布

烟台-山子

最新推荐文章于 2024-06-26 17:58:07 发布

阅读量4k

点赞数 2

分类专栏： JSP

本文链接：https://blog.csdn.net/suyu_happy/article/details/94462457

版权

JSP 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

个

想要实现如上图动态添加或者删除一行的功能，代码如下：（包含点击“环节参与人员”空白栏时弹出组织结构人员树时的弹窗功能）

HTML部分：

<body >
	<div id="table_" style="margin-left: 20px;margin-top: 50px">
	<table id="tab01" cellpadding="0" border="2" width="760px">
	<tr >
		<td align="center" width="40px">环节序号</td>
		<td align="center" width="340px">环节参与人员</td>
		<td align="center" width="180px">功能</td>
		<td align="center" width="120px">添加/删除</td>
		<td align="center" width="100px">备注</td>
	</tr>					
	<tr >
		<td align="center"><input type="text" id="huanjiename01" name="huanjiename" value="01" readonly="readonly" style="border-style: none; width: 30px;"></td>
		<td><input type="text" id="huanjieren01" name="huanjieren" value="${userName }" readonly="readonly"  size="60" >
			<input type="hidden" id="huanjieren01id" name="huanjieren01id" value="${userId }"></td>
		<td>&nbsp;&nbsp;</td>
		<td>无</td>
		<td><input type ="text" id="demo01" name="demo" value="发起人" readonly="readonly"></td>
	</tr>
	<tr >
		<td align="center"><input type="text" id="huanjiename02" name="huanjiename" value="02" readonly="readonly"  style="border-style: none; width: 30px;">
		<td><input type="text" id="huanjieren02" name="huanjieren" onclick="prefox(02)" readonly="readonly" size="60" >
			<input type="hidden" id="huanjieren02id" name="huanjieren02id"></td>
		<td><input type="radio" name="fun02" value="协同" checked="checked" >协同&nbsp; &nbsp;<input type="radio" name="fun02" value="审批" >审批</td>
		<td>&nbsp<a href="#" onclick="addRow(this)">添加</a></td>
		<td><input type ="text" id="demo02" name="demo" ></td>
	</tr>					
	</table>
	<div align="right" style="margin-top: 20px;margin-right: 50px">
		<input type="button"  name="tijiao" value="保存并关闭" onclick="save()" >
	</div>
</div>
</body>

JS部分：

<script type="text/javascript">

//选择人员（与项目相关，该功能可忽略）
function prefox(a){
	window.opener.document.getElementById("liuchenginfo__ext4").value="";    //清除父窗口中人员信息
	     a="0"+a;        
	var id1="huanjieren"+a;
    var id2=id1+"id";
    var url = "../tree/newTree.jsp";
	var personid = "";
	var personname = "";
	var organpersonid = "";
	var organpersonname = "";
	var persongroupid = "";
	var persongroupname = "";
	var organgroupid = "";
	var organgroupname = "";
	var groupid = "";
	var groupname = "";
	var j=new Object();
	
	var obj=showModalDialog(url,[["person",false],["group"],false],'dialogWidth:700px;dialogHeight:500px;status:no;scroll:no');
//	var obj=window.open(url,[["person",false],["group"],false],'modal=yes,height=500,width=700,top='+(screen.height-400)/2+',left='+(screen.width-635)/2+',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');
	if(obj != null && obj.length != 0){
		//获得人员组织树中的人员
		for(var i=0;i<obj[0].person.length; i++){
			if(i==0){
				personid+=obj[0].person[i].value;
				personname+=obj[0].person[i].text;
			}else{
				personid+=','+obj[0].person[i].value;
				personname+=','+obj[0].person[i].text;
			}
		}
		if(personid.length<=0) {
	    	alert("请选择接收人，且不要选择组织！");
	    } else {
	        j.personids=personid;
		    j.persons=personname;
		    document.getElementById(id1).value=personname;             //人员姓名
		    document.getElementById(id2).value=personid;			 //人员id
		    
	    }
	}
}

//添加行
function addRow(obj){
	var tb = document.getElementById('tab01');    // table 的 id
	var rows = tb.rows;                           // 获取表格所有行
	var i = rows.length-1;						 //表格最后一行
	var j="huanjiename0"+i;            
	var k=document.getElementById(j).value;
	    k=k.replace("0","");				//将数字前面的“0”去掉，防止异常
	var m=parseInt(k)+1;
	var n="0"+m;
	var table = obj.parentNode.parentNode.parentNode;	
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
	var td3 = document.createElement('td');
	var td4 = document.createElement('td');
	var td5 = document.createElement('td');
	td1.setAttribute("align","center");
	td1.innerHTML='<input type="text" id="huanjiename'+n+'" name="huanjiename" value="'+n+'" readonly="readonly" style="border-style: none; width: 30px;">';
	td2.innerHTML='<input type="text" id="huanjieren'+n+'" name="huanjieren" onclick="prefox('+n+')" size="60"><input type="hidden" name="huanjieren'+n+'id" id="huanjieren'+n+'id" >';
	td3.innerHTML='<input type="radio"  name="fun'+n+'" value="协同"  checked="checked" >协同 &nbsp; &nbsp;<input type="radio" name="fun'+n+'" value="审批" >审批 ';
	td4.innerHTML='&nbsp<a href="#" onclick="addRow(this)">添加</a>&nbsp<a href="#" onclick="removeRow(this)">删除</a>';
	td5.innerHTML='<input type ="text" id="demo'+n+'" name="demo" value="" >';
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	table.appendChild(tr);
}
function removeRow(obj){
	var tr = obj.parentNode.parentNode;
	var trArr= obj.parentNode.parentNode.parentNode.children;
	if(tr.rowIndex == trArr.length -1){		//如果是最后一行，则直接删除即可
		tr.parentNode.removeChild(tr);
	}else{
		alert("对不起，只能从最后一行开始删除！");
	}
}

function save(){
	if(confirm("是否现在进行提交？")){
		var tb = document.getElementById('tab01');    // table 的 id
		var tr = tb.rows;   
		var result = []; // 数组
		var prid='${processid }';
		for (var i = 2; i < tr.length; i++) {// 遍历表格中每一行的内容
			var func;
			 var radios = document.getElementsByName("fun0"+i);
			 var names = document.getElementById("huanjieren0"+i).value;
			 if(names==""){
				 alert("对不起，环节参与人不能为空！");
				 return false;
			 }
		     if(radios[0].checked==true){
		    	 func=radios[0].value;
		     }else{
		    	 func=radios[1].value;
		     }
		
			var tds = $(tr[i]).find("td");	
			
				 result.push({
					"huanjiename" : $(tds[0]).find("input").val(),
					"ext5" : $(tds[1]).find("input").val(),
					"ext6" : $('#huanjieren0'+i+'id').val(),
					"ext3" : func,
					"processid":prid,
					"ext4": $(tds[4]).find("input").val()
				}) 
		}
	  	//var jsonData={"result":result}
			$.ajax({
				type : "post",
				url : "../huanjiebiao/insertHuanjie.do",
				data : {"json":JSON.stringify(result)},
				dataType:"json", 			//返回类型
				success : function(msg) {
		        	if(msg){	  		        		
		        		var namefun=msg[0].PERSONNAME+"("+msg[0].EXT4+")";
		        		for ( var i = 1; i < msg.length; i++) {
		        			var personname=msg[i].PERSONNAME;
		        			var fun=msg[i].EXT4;
		        			namefun=namefun+","+personname+"("+fun+")";
		        		}	
		        		window.opener.document.getElementById("liuchenginfo__ext4").value=namefun;
				}
		        	window.close();
			}
			})
	}else{
      return false;
	}	
}

</script>

菜鸟级代码水平，还望各位大佬们多多指点，小弟在此多谢了！

烟台-山子

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
JSP中动态添加或删除table的行

个想要实现如上图动态添加或者删除一行的功能，代码如下：（包含点击“环节参与人员”空白栏时弹出组织结构人员树时的弹窗功能）HTML部分：<body > <div id="table_" style="margin-left: 20px;margin-top: 50px"> <table id="tab01" cellpadding="0" borde...
复制链接

扫一扫

专栏目录