动态操作表格,复选框,模态对话框传递总结(精华版)

最新推荐文章于 2020-06-09 23:56:36 发布

penghuaiyi2008

最新推荐文章于 2020-06-09 23:56:36 发布

阅读量140

点赞数

分类专栏： JavaScript总结文章标签： HTML

JavaScript总结专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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>