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

个

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

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 的 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" >协同 &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 的 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>

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

JSP中动态添加或删除table的行相关推荐

Unity NGUI中动态添加和删除sprite
(以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网比巴卜: 参考链 ...
Unity NGUI中动态添加和删除sprite（附上转载者注释）
--------------------- 此部分为转载的感受. 原文对于NGUI如何动态添加删除sprite,以及调用NGUI中的图集Atlas都有很明确的代码. 转载括号内容附上转载作者(Bula ...
JSP中动态添加 “添加附件选择框”
<script language="javascript"> iIndex = 0; var annex = 0; function getIndex() { iInd ...
JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
vue根据索引删除数组中的一个对象_Vue实现动态添加或者删除对象和对象数组的操作方法...
添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], va ...
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）
前言学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...

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

JSP中动态添加或删除table的行相关推荐

最新文章

热门文章