个
想要实现如上图动态添加或者删除一行的功能，代码如下：（包含点击“环节参与人员”空白栏时弹出组织结构人员树时的弹窗功能）
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> </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" >协同 <input type="radio" name="fun02" value="审批" >审批</td><td> <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 的 idvar 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" >协同 <input type="radio" name="fun'+n+'" value="审批" >审批 ';td4.innerHTML=' <a href="#" onclick="addRow(this)">添加</a> <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 的 idvar 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>
菜鸟级代码水平，还望各位大佬们多多指点，小弟在此多谢了！
