个
想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击“环节参与人员”空白栏时弹出组织结构人员树时的弹窗功能)
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 的 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" >协同 <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 的 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>
菜鸟级代码水平,还望各位大佬们多多指点,小弟在此多谢了!