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

penghuaiyi

浏览: 521285 次
性别:
来自: 苏州

最近访客更多访客>>

kingbird001

Dong丶

forborn

wwh_1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript总结

HTML

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">&nbsp;
	<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>

分享到：

Java定时执行某个任务 | checkbox选中／取消选中后动态填充到表格中

2009-03-21 16:43
浏览 1616
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Javascript实现的颜色选择器

JS控制文本框只能输入整数或带一位小数的浮点数

ymPrompt弹出窗口(很牛x的)

Javascript实现的遮罩层

Javascript培训文档

结点可以拖动，右键弹出操作菜单的树(dhtmlxtree改造)

可以拖动的DIV

泽元公司实现的对话框(很牛的)

鼠标点击拖动选中(模仿google日历网格)

点击鼠标右键弹出自定义菜单

解决循环动态添加事件，参数为最后一次循环值的问题

JS实现的分页

JS文档对象模型(DOM)的基本方法

为指定的表单元素动态添加事件

javascript中的数组(Array)扩展

如何在框架(frame)页面之间使用appendChild()？

按钮下方弹出层

js实现的tab

iframe自适应高度

可手动输入的select

最近访客更多访客>>