`

checkbox选中／取消选中后动态填充到表格中

prototypeHTML 
阅读更多 
<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[0].style.display='block';
	window.parent.dialogArguments[1].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[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"  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" 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="zne" class="text" onclick="new WdatePicker(this)" readonly></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>
分享到：
| JSP中页面自动定时刷新
评论
发表评论

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

相关推荐

    两层嵌套的checkbox记录选中状态

    在IT领域，尤其是在Android开发中，经常需要处理用户交互，比如多层嵌套的复选框（checkbox）的选中状态管理。这个场景通常出现在数据结构复杂，需要展示层次关系的时候，例如在ListView中嵌套一个Gridview，而...

    winform DataGridView表头带CheckBox全选

    在Windows Forms（Winform）开发中，`DataGridView`控件是一种常用的数据展示工具，它可以方便地展示表格数据并提供交互功能。在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便...

    QTableWidget_CheckBox

    在Qt库中，QTableWidget是一个非常常用的控件，用于展示二维表格数据。它提供了丰富的功能，如编辑、排序和筛选。然而，有时我们可能需要更高级的功能，比如在单元格内添加复选框（CheckBox），以实现更具交互性的...

    解决方案：webwork checkboxlist遍历双重list，并设置选中

    本篇文章将深入探讨如何在Webwork中处理双重列表（list within a list）中的checkboxlist，并设置选中状态。 在Web界面中，为了展示和编辑双重列表的数据，通常会使用表格（table）结构。例如，我们可能有一个`...

    winform中gridview的checkbox使用案例

    在Windows Forms（Winform）开发中，GridView控件是一个常用的数据展示工具，它允许用户以表格形式查看和操作数据。而当需要实现用户交互，比如选择行或项时，Checkbox功能就显得尤为重要。本篇文章将深入探讨如何在...

    flex 简单的增删改查 另外添加checkbox grid

    2. 删除（Delete）：在Grid中，可以通过Checkbox选中要删除的行，然后根据选中的数据项执行删除操作。 3. 修改（Edit）：用户点击Grid中的某一行进行编辑，表单会自动填充该行的数据，用户修改后保存到模型中。 4. ...

    GridView分页和选择某条记录

    GridView是ASP.NET中一个常用的控件，用于展示数据集，如数据库中的表格数据。它提供了丰富的功能，包括数据绑定、排序、分页和选择特定记录等。在这个示例中，我们将深入探讨“GridView分页”和“选择某条记录”的...

    QTableWidget表头添加复选框实现全选功能

    有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...

    NET MVC3使用CheckBox List（复选框列表）的简单方法

    1. **初始化视图**：在`AddUser`方法中初始化视图数据，创建了一个`AddUserModel`实例，并填充了角色信息。 2. **处理POST请求**：当用户提交表单时，`AddUser`方法会被标记为`[HttpPost]`的方法调用，这里可以通过`...

    选中下拉框中的值和搜索GridView中的列的索引的公用方法

    1. **`CheckBoxList`**：对于`CheckBoxList`，代码通过遍历所有项并检查`strValueField`中是否包含该项的值来决定是否选中。 2. **`RadioButtonList`**：对于`RadioButtonList`，处理逻辑类似于`DropDownList`，但...

    Delphi StringGrid文字居中,Titile字体变大,Cell添加CheckBox

    在Delphi编程中，StringGrid是一个非常常用的组件，用于显示二维表格数据。在这个主题中，我们将探讨如何实现StringGrid中的文字居中、调整Title的文字大小和颜色，以及在单元格中添加并操作CheckBox控件。 首先，...

    前端：表格内容的添加和删除

    添加新行时，可以创建新的`&lt;tr&gt;`元素，然后为其填充`&lt;td&gt;`，最后将这个新行插入到表格的`&lt;tbody&gt;`中。例如： ```javascript function addRow(name, age, city) { var row = document.createElement('tr'); row....

    表格中插入组合框及复选框示例(VFP)

    学习这个示例，你可以了解如何在表格中动态加载数据到组合框，如何响应用户选择并更新表格内容，以及如何根据复选框状态执行条件逻辑。这些都是数据库应用开发中的基础技能，对于理解VFP的事件驱动编程模式和增强...

    Java创建和填充PDF表单域方法

    在Java编程中，创建和填充PDF表单域是一项常见的任务，尤其在数据处理和报告生成领域。本篇文章将深入探讨如何使用Java实现这一功能，并提供一个详细的步骤和示例代码。 首先，表单域是PDF文档中用于用户交互的重要...

    LinearLayout表格

    在提供的`TestDataBase`文件中，可能包含了测试数据的示例或者数据库相关的代码，这可能用于填充表格的数据。通常，数据会被绑定到每个单元格的视图上，例如`TextView`的文本或`CheckBox`的选中状态。你可以根据实际...

    Extjs 点击复选框在表格中增加相关信息行

    最后，使用`gridPanelStore.loadData()`方法将更新后的`gridItems`数组加载到表格中，`false`参数表示不触发数据刷新事件，防止不必要的重绘。然而，根据描述中提到的问题，尝试直接赋值给`gridPanelStore.data....

    带有CHECKBOX的LISTCTRL

    7. **保存和恢复状态**：如果需要在程序重启后恢复用户的选取，可以将当前的选中状态存储到配置文件或注册表中，然后在程序启动时加载这些状态。 在实际开发中，你可能会遇到性能优化、复选框状态同步、多线程访问...

    第6章 Dreamweave中表格和表单的应用.pptx

    2. **填充表格内容**：插入表格后，只需将光标定位到相应单元格，就可以直接输入文本或插入图像。这是向表格添加内容的基本方法。 3. **选择表格**：选择表格有不同的方式，如选择整个表格、整行或整列、单个单元格...

    DataGrid的itemRenderer and HeaderRenderer

    在`headerRenderer`中，我们可以添加一个全局的`CheckBox`，当用户点击这个`CheckBox`时，可以遍历所有行的`itemRenderer`中的`CheckBox`，并设置它们的选中状态，从而实现全选或全取消选择。 此外，`combobox`作为...

    Cocoa--NSTableView中使用CheckBox,Popup,Image

    在数据源方法中初始化并填充下拉菜单的选项，然后设置`NSPopUpButton`的`tag`属性，以便于识别当前选中的行。 ```swift func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int)...

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