动态操作表格,复选框,模态对话框传递总结(精华版)
编程技术 / houtizong 发布于 3年前 43
- 1.req_add.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>填写A端申请信息</title><script> function addA() { var reval=window.showModalDialog("req_add_a.html", ["100","200"],"dialogHeight=400px; dialogWidth=650px;status=no"); if(reval!=undefined) { var tab=document.getElementById("circuit"); var ne=reval.reval; var aport=reval.port; for(var i=0;i<aport.length;i++) { var tr=tab.insertRow(tab.rows.length); var td=tr.insertCell(); td.innerHTML="<input type=checkbox name=sel value="+i+" >"; var td0=tr.insertCell(); td0.innerHTML="<input type=text name=systemNum size=5>"; var td1=tr.insertCell(); td1.innerHTML="<input type=text name=bandwidth size=5>"; var td2=tr.insertCell(); td2.innerHTML=ne[0]; var td3=tr.insertCell(); td3.innerHTML=aport[i]; var td4=tr.insertCell(); td4.innerHTML="东R47-5-6-1"; var td5=tr.insertCell(); td5.innerHTML=ne[1]; var td6=tr.insertCell(); td6.innerHTML=ne[2]; } } } function deleteItem() { var tab=document.getElementById("circuit"); var boxs=document.all.sel; if(boxs!=undefined) { for(var i=0;i<boxs.length;i++) { if(boxs[i].checked) { tab.deleteRow(i+1); } } } }</script></head><body><br> <table border="1"> <tr> <td class="label">申请人</td> <td>zhangsan</td> <td class="label">联系电话</td> <td><input type="text" name="text" class="text"></td> </tr><tr> <td class="label">申请人部门</td> <td>网管中心话务室</td> <td class="label">申请时间</td> <td><input type="text" name="text" class="text" onclick="new WdatePicker(this)" readonly></td> </tr> <tr> <td class="label">完成时限</td> <td><input type="text" name="text" class="text" onclick="new WdatePicker(this)" readonly></td> <td class="label">受理时限</td> <td><input type="text" name="text" class="text" onclick="new WdatePicker(this)" readonly></td> </tr> <tr> <td class="label">申请事由</td> <td colspan="3"><input type="text" name="text" class="text" style="width:270px"></td> </tr> </table> <div>新增二干申请单A端业务信息</div> <table border="1" id="circuit"> <tr class="header"> <td><input type="checkbox"></td> <td>系统号</td> <td>带宽</td> <td>A端网元</td> <td>A端端口</td> <td>A端交换DDF位置</td> <td>Z端网元</td> <td>要求开通时间</td> </tr></table></div></div> <br><div align="center"> <input type="button" value="添加业务项" class="button_tt" onClick="addA()"> <input type="button" value="删除业务项" class="button_tt" onClick="deleteItem()"> <input type="button" value="保 存" class="button_tt" onClick=""> <input type="button" value="提 交" class="button_tt" onClick=""> <input type="button" value="返 回" class="button_tt" onClick="location.href('req_add_list.html')"></div></body></html> 2. req_add_a.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><script>// var args=window.parent.dialogArguments;// alert(args[0]);// alert(args[1]);function confirmSelect(){var reval=new Array();var port=new Array();var ane=document.all.ane.value;reval.push(ane);var aport=document.getElementsByName("aport");for(var i=0;i<aport.length;i++){ port.push(aport[i].value);}var zne=document.all.zne.value;reval.push(zne);var time=document.all.time.value;reval.push(time);window.returnValue={"reval":reval,"port":port};window.close();} var group=new Array(); function selectPort(obj) { if(obj.checked) { group.push(obj.value); }else{ group.removeElement(obj.value); } writeTable(); } /* *删除数组中的某一个元素 */ Array.prototype.removeElement=function(value) { for(var i=0;i<this.length;i++) { if(this[i]==value) { for(var j=i;j<this.length-1;j++) { this[j]=this[j+1]; } this.length--; break; } } } /* function removeElement(val) { for(var i=0;i<group.length;i++) { if(group[i]==val) { for(var j=i;j<group.length-1;j++) { group[j]=group[j+1]; } group.length--; break; } } }*/ /** *将选中的端口填充到表格中 */ function writeTable() { removeAllRows(); var tab=document.getElementById("selectedPort"); for(var i=0;i<group.length;i++) { if(i%4==0) { tr=tab.insertRow(tab.rows.length); } var td=tr.insertCell(); td.innerHTML=group[i]+"<input type=hidden name=aport value="+group[i]+">"; } } /** *删除表格中的所有行 */ function removeAllRows() { var tab=document.getElementById("selectedPort"); for(var i=tab.rows.length-1;i>=0;i--) { tab.deleteRow(i); } } function clearValue(){ document.all.ane.value="";}function selectNe(){ var reval=window.showModalDialog("select_ane.html" ,'',"dialogHeight=350px; dialogWidth=650px;status=no"); }</script></head><body><br><div class="history-item"><div class="history-item-title">填写A端信息</div><div class="history-item-content"><table class="formTable"> <tr> <td class="label">A端网元名称</td><td><input type="text" name="ane" class="text"> <img src="../../../../images/download.gif" width="9" height="10" style="cursor:hand " title="选择A端网元" onClick="selectNe();"> <img src="../../../../images/undo.gif" width="13" height="13" style="cursor:hand " title="清空A端网元" onClick="clearValue();"><input type="button" value="选择端口" class="button_tt"></td> </tr> <tr> <td class="label">已选端口列表</td> <td> <table id="selectedPort" class="formTable"> </table> </td> </tr> <tr> <td class="label">待选空闲端口列表</td> <td> <table class="formTable"> <tr> <td>101<input type="checkbox" name="port" value="101" onClick="selectPort(this)"></td> <td>102<input type="checkbox" name="port" value="102" onClick="selectPort(this)"></td> <td>103<input type="checkbox" name="port" value="103" onClick="selectPort(this)"></td> <td>104<input type="checkbox" name="port" value="104" onClick="selectPort(this)"></td> </tr> <tr> <td>105<input type="checkbox" name="port" value="105" onClick="selectPort(this)"></td> <td>106<input type="checkbox" name="port" value="106" onClick="selectPort(this)"></td> <td>107<input type="checkbox" name="port" value="107" onClick="selectPort(this)"></td> <td>108<input type="checkbox" name="port" value="108" onClick="selectPort(this)"></td> </tr> </table> </td> </tr> <tr> <td class="label">Z端网元</td> <td><input type="text" name="zne" class="text" value="KAFDM1"></td> </tr> <tr> <td class="label">要求开通时间</td> <td><input type="text" name="time" class="text" ></td> </tr> </table></div></div><br><div align="center"> <input type="button" value="确 定" class="button_tt" onClick="confirmSelect()"> <input type="button" value="关 闭" class="button_tt" onClick="window.close();"></div></body></html> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
