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

最新推荐文章于 2023-03-04 16:30:44 发布

penghuaiyi2008

最新推荐文章于 2023-03-04 16:30:44 发布

阅读量239

点赞数

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

JavaScript总结专栏收录该内容

44 篇文章 0 订阅

订阅专栏


<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"> 
	<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>

penghuaiyi2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox选中／取消选中后动态填充到表格中

[code="java"]function confirmSelect(){ window.parent.dialogArguments[0].style.display='block'; window.parent.dialogArguments[1].style.display='block'; window.close();} v...
复制链接

扫一扫