checkbox选中／取消选中后动态填充到表格中
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link href="../../../../css/all.css" rel="stylesheet" type="text/css"><link href="../../../../css/forms.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="../../../../js/datepicker/WdatePicker.js"></script><script>function confirmSelect(){window.parent.dialogArguments.style.display='block';window.parent.dialogArguments.style.display='block';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==value) { for(var j=i;j<this.length-1;j++) { this=this; } this.length--; break; } } } /* function removeElement(val) { for(var i=0;i<group.length;i++) { if(group==val) { for(var j=i;j<group.length-1;j++) { group=group; } 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+"<input type=hidden name=aport value="+group; } } /** *删除表格中的所有行 */ 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">&nbsp;<img src="../../../../images/download.gif" width="9" height="10" style="cursor:hand " title="选择A端网元"> <img src="../../../../images/undo.gif" width="13" height="13" style="cursor:hand " title="清空A端网元"><input type="button" value="选择端口" class="button_tt"></td></tr><tr> <td class="label">已选端口列表</td> <td> <table id="selectedPort"border="1" cellspacing="0" cellpadding="0"> </table> </td></tr><tr> <td class="label">待选空闲端口列表</td> <td> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>101<input type="checkbox" name="port" value="101" ></td> <td>102<input type="checkbox" name="port" value="102" ></td> <td>103<input type="checkbox" name="port" value="103" ></td> <td>104<input type="checkbox" name="port" value="104" ></td> </tr> <tr> <td>105<input type="checkbox" name="port" value="105" ></td> <td>106<input type="checkbox" name="port" value="106" ></td> <td>107<input type="checkbox" name="port" value="107" ></td> <td>108<input type="checkbox" name="port" value="108" ></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="zne" class="text"readonly></td></tr> </table></div></div><br><div align="center"> <input type="button" value="确 定" class="button_tt" > <input type="button" value="关 闭" class="button_tt" ></div></body></html>
页:
[1]