`

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

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>
分享到：
| checkbox选中／取消选中后动态填充到表格中
评论
发表评论

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

相关推荐

    mfc中模态、非模态对话框与主对话框之间的数据交换

    点击运行弹出一个对话框，点击DIALOG1按钮弹出一个模态对话框，在该对话框的编辑框输入文本点击确定该对话框消失且输入的文本被显示到主对话框MainDialog中，点击DAILOG2按钮弹出一个非模态对话框，操作现象和模态...

    详解VC++模态对话框和非模态对话框

    在VC++中，MFC（Microsoft Foundation Classes）框架提供了两种主要的对话框类型：模态对话框和非模态对话框。这两种对话框在程序执行流程和用户交互方面有着显著的区别。 模态对话框（Modal Dialog Box）是通过...

    模态对话框与非模态对话框程序Java示例

    总结来说，模态对话框和非模态对话框在Java编程中各有其适用场景。模态对话框适用于需要用户集中注意力解决单一问题的情况，而非模态对话框则适合于不打断用户工作流程的多任务处理。通过JOptionPane和JDialog类，...

    vc的模态对话框和非模态对话框

    ### VC的模态对话框和非模态对话框详解 #### 概述 在Visual C++（VC）中，模态对话框与非模态对话框是两种常见的对话框类型，它们各自具备独特的特性和用途。理解这两种对话框的区别对于开发用户友好的应用程序至...

    VC中模态对话框和非模态对话框的编程

    对话框通常包含多种控件，如文本框、复选框等，这些控件用于收集用户的输入数据。为了实现对话框与这些控件之间的数据交换，MFC提供了一套称为“数据映射”的机制，即数据交换机制(DDX)。 1. **数据映射**：通过...

    qml自定义模态对话框

    模态对话框是一种阻塞用户与对话框之外的界面交互的窗口，直到用户完成对话框中的操作或关闭对话框。这种设计有助于集中用户的注意力，并确保在处理关键任务时不会被其他操作打扰。 创建自定义模态对话框的第一步是...

    MFC模态 非模态对话框 ARX2008+VS2005

    在ARX中，模态对话框通常用于一次性输入数据或执行特定任务，例如设置参数、确认操作等。 2. **非模态对话框（Modeless Dialog Box）** 非模态对话框则不会阻止用户与父窗口交互，它们可以与父窗口同时存在并进行...

    VS2010+MFC 模态对话框、非模态对话框的显示与打开以及对话框的之间的数据传递

    在C++编程环境中，...总结来说，理解并掌握模态和非模态对话框的创建、显示以及它们之间的数据传递，是MFC编程中必不可少的技能。通过学习和实践，开发者能够更加高效地构建用户界面，提升应用程序的用户体验。

    一个简单模态对话框实例

    1. **定义对话框布局**：首先，我们需要设计对话框的界面布局，包括控件（如文本框、复选框、按钮等）的位置和功能。这可以通过各种图形用户界面（GUI）工具或代码直接实现。 2. **编写事件处理程序**：对话框中的...

    MFC模态对话框和非模态对话框

    非模态对话框则适用于那些提供持续服务或者与主窗口并行操作的功能，如查找替换、工具提示等。 使用MFC创建对话框时，还需要注意以下几点： 1. 对话框资源：在资源编辑器中设计对话框布局，包括控件的位置、大小和...

    子模态对话框关闭后刷新父模态对话框

    模态对话框（Modal Dialog）是一种常见的UI元素，它强制用户在完成特定任务或作出决定之前与之交互，不能操作背景页面。本话题关注的是如何在关闭子模态对话框后刷新其父模态对话框，这是一个典型的前端开发问题，...

    模态对话框和非模态对话框创建和使用VS2010/MFC

    总结来说，模态和非模态对话框在VS2010/MFC环境中是开发用户界面的重要组件，它们提供了灵活的交互方式，适应不同类型的用户需求。理解它们的工作原理和创建方法对于构建高效、用户友好的Windows应用程序至关重要。

    创建非模态对话框

    总结来说，非模态对话框为用户提供了一种更加灵活的交互方式，但同时也需要开发者更加细致地处理用户界面的管理和控制。在实际开发过程中，还需要根据具体的应用场景和需求来进一步优化和完善。

    android 模态与非模态对话框实现

    模态对话框（Modal Dialog）是一种阻塞用户界面直至用户进行相应操作的对话框。在Android中，常见的模态对话框有AlertDialog、ProgressDialog等。它们会阻止用户与应用程序的其他部分进行交互，直到用户关闭对话框。...

    VS2010模态非模态对话框.rar

    总结来说，VS2010中的MFC提供了方便的方式来创建模态和非模态对话框，并在它们之间传递数据。理解这些概念和操作方法对于开发复杂的Windows应用程序至关重要。通过实践和不断学习，开发者可以熟练掌握这些技能，提高...

    vc非模态对话框例子

    非模态对话框与模态对话框不同，在非模态对话框活动的同时，用户还可以在应用程序的其他地方工作，而模态对话框在其关闭之前，用户不能在同一个应用程序的其他地方工作。本例将从主框架窗口创建一个简单的非模态...

    MFC模态对话框与非模态对话框

    MFC中经常会用到弹出模态或非模态对话框，模态对话框与非模态对话框容易混淆

    模态对话框

    模态对话框是一种阻塞式窗口，当它打开时，用户必须先对其作出响应才能继续操作主应用程序。这种设计确保了用户在处理当前任务时不会被其他不相关的功能或信息干扰，从而提高了交互的专注度和效率。 模态对话框通常...

    VC++创建模态对话框

    模态对话框通常包含一系列控件，如按钮、文本框、复选框等，这些控件可以通过资源编辑器进行设计。 步骤1：创建新项目 打开VC++开发环境，创建一个新的MFC应用项目。在“应用程序向导”中选择“单文档”或“无文档...

    Visual C++模态对话框消息处理机制的分析

    在模态对话框处于活动状态期间，应用程序只能处理与该模态对话框相关的消息，其他的消息将被阻塞，直到模态对话框关闭。 消息队列是Windows程序中一个非常重要的概念，它用于存放各种窗口的消息。每个应用程序都有...

Magicbox
Global site tag (gtag.js) - Google Analytics