JavaScript動態添加和刪除控件

方法一:

<input type="button" onClick="add();" value="添加控件">
<div id="a">

</div>
<script>
var num=0;
function add(){
alert(window.document.getElementById("a").innerHTML);
window.document.getElementById("a").innerHTML=window.document.getElementById("a").innerHTML + "<br/><input type='text' id='up"+num+"'><a href='#' onClick='javascript:del("+num+");'>刪除此控件"+num+"</a>";  
num=num+1;
}
function del(n){
var str=window.document.getElementById("a").innerHTML;
var regEx=new RegExp("<BR><[^<>]*(up"+n+"){1}[^<>]*><[^<>]*>[^<>]*</A>");
str=str.replace(regEx,"");
alert(str);
window.document.getElementById("a").innerHTML=str;
}
</script>

方法二:

 attach.js

var currFocus;
var ExistAttaInfo = new Array();
var oldDelAttas = new Array();
var attaIdx = 0;
var IsIE;
function fInitMSIE(){
if (navigator.userAgent.indexOf("MSIE") != -1){
IsIE = true;
}else{
IsIE = false;
}
}
fInitMSIE();

 

function fTrim(str){
str = str.replace(/(^s*)/,"");
str = str.replace(/(s*$)/,"");
return str;
}

//本js文件用於compose.htm同時發送多個附件的js函數，支持 IE 和 NNx 系列。
//所有的函數都適用於 IE 和 NNx 系列，直接調用就可以
//函數裏面會根據語句判斷瀏覽器類型，然後依據不同的bowser屬性增加元素
//主要功能是動態創建 各種表單元素 和 刪除表單元素
//written by xpr

//    function list
//    -------------------------------------------------------------------------------------------------------------------
//    IsIEBrowser()  返回值: true(IE) false(NNx)
//    exist(fileId)  判斷fileId是否已經存在
//    addInputFile(spanId,fileId)  在名爲spanId 的元素裏面增加序號爲index的input file
//    addbr(spanId,brId)  在名爲spanId 的元素裏面增加id爲brId的換行符
//    adddel(spanId,index) 在名爲spanId 的元素裏面增加序號爲index的"刪除"按鈕，他可以刪除相應的input file 和 br
//    addhidden(spanId,hiddenId,value)  在名爲spanId 的元素裏面增加id爲hiddenId，值爲value的input type=hidden
//    -------------------------------------------------------------------------------------------------------------------

var IsIE;
var attaIdx = 0;

//search,全局變量
//-----------------------------------------------------------------------------------------------------------
function IsIEBrowser() {
if (navigator.userAgent.indexOf("MSIE") != -1) {
return true;
} else {
return false;
}
}

// 增加附件函數 ()，增加到 idfilespan,基數爲 attaIdx 。

function add() {

addfile("idfilespan",attaIdx);
attaIdx++;
return false;
}

//----------------------------------------fileexist()----------------------------------------------------------
//edited by alun
function exist(fileId) {
      var file = document.getElementById(fileId);
  var result = false;
  if ( file !=null ) {
if ( file.value != null && file.value != "") {
result = existFile( file);

}//if
  }
  if( result)
  {
alert("這個附件您已經添加過了,新添加的附件將已被刪除");
//document.sendmail."+fileId+".value=""";
var attach_num = fileId.substring(10,12);

delfile("idfilespan",attach_num);
 
//--attaIdx;
//document.getElementById( "idAttachOper"+ attaIdx).click();
  }
}//end of function
//added by alun
function getfilename( attaName ) {
var s = attaName.lastIndexOf( '/' );
return attaName.substr(s+1, attaName.length - s -1);
}
//added by alun
function existFile( file)
{
var form = document.sendmail;
for ( var i= 0 ; i < form.elements.length ; i ++ ) {    
if ( form.elements[i].type == "file" && form.elements[i].name != file.name ) {
if ( file.value == form.elements[i].value ) {
//alert(form.elements[i].value=null);
return true;
}
}
}//for
for (var i=0; i<ExistAttaInfo.length; i++) {
var theName = ExistAttaInfo[i];
if ( theName != null && theName != "" && theName == getfilename(file.name) ) {
return true;
}
}
return false;
}
//----------------------------------------addfile(spanId,index)----------------------------------------------
function addfile(spanId,index)
{
       var strIndex = "" + index;
   
   var fileId = "attachfile"+ strIndex;
   var brId = "idAttachBr" + strIndex;
   addInputFile(spanId,fileId);

   adddel(spanId,index);

   addbr(spanId,brId);
   //document.getElementById( "attachfile"+ strIndex).click();
   return;
}
//-------------------------------------------sub fuction addInputFile-----------------------------------------
function addInputFile(spanId,fileId)
{
  var span = document.getElementById(spanId);
  if ( span !=null ) {
                if ( !IsIE ) {
var fileObj = document.createElement("input");
if ( fileObj != null ) {
fileObj.type="file";
fileObj.name = fileId;
fileObj.id = fileId;
fileObj.size="50";
var clickEvent = "exist('" + fileId + "')";
fileObj.setAttribute("onclick",clickEvent,0);  
span.appendChild(fileObj);
}//if fileObj
}// !IsIE

if ( IsIE ) {
var fileTag = "<input type='file'  id ='" + fileId + "' style='BORDER-RIGHT: #000000 1px solid; background-color: #FFFFFF; BORDER-TOP: #000000 1px solid; OVERFLOW: no; vertical-align: top;  BORDER-LEFT: #000000 1px solid; WIDTH: 90%; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 20' size=50 name='" + fileId + "' size=50 οnchange=exist('" + fileId + "')>";
var fileObj = document.createElement(fileTag); 
span.appendChild(fileObj);
}//IsIE if

  }//if span
}

function addbr(spanId,brId)
{
  var span = document.getElementById(spanId);
  if ( span !=null ) {
var brObj = document.createElement("br");
if ( brObj !=null ) {
brObj.name = brId;
brObj.id = brId;
span.appendChild(brObj);
            }//i2f
     }//if
 return;
}

function adddel(spanId,index)
{
      var strIndex = "" + index;
  var delId = "idAttachOper" + strIndex;
  var span = document.getElementById(spanId);
  if ( span != null ) {
var oTextNode = document.createElement("SPAN");
oTextNode.style.width = "5px";
span.appendChild(oTextNode);
    if ( IsIE ) {
        var tag = "<input type='submit' style='BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; OVERFLOW: no; BORDER-LEFT: #000000 1px solid;  BORDER-BOTTOM: #000000 1px solid; HEIGHT: 20' size=70 value='$subject'  id='" + delId + "' οnclick=delfile('" + spanId + "',"+strIndex+")></input>";
var delObj = document.createElement(tag);
if ( delObj != null ) {
span.appendChild(delObj);
}//if

}// Is IE

        if ( !IsIE ) {
var delObj = document.createElement("input");
if ( delObj != null ) {
delObj.name = delId;
delObj.id = delId;
delObj.type = "button";
var clickEvent = "return delfile('" + spanId + "',"+strIndex+");";
delObj.setAttribute("onclick",clickEvent);  
span.appendChild(delObj);
}//if
}// !IsIE if
if( delObj != null) delObj.value = "刪 除";
}//main if
return;
}


//-------------------------------------------------------------------------------------------------------------


//---------------------------------------------delete input file-----------------------------------------------
function delfile(spanId,index)
{
   var strIndex = "" + index;
   var fileId = "attachfile"+ strIndex;
   var brId = "idAttachBr" + strIndex;
   var delId = "idAttachOper" + strIndex;
   //first,get the element
       var span = document.getElementById(spanId);
   //alert(  "del span: " + span  );
   if ( span == null ) return false;

   var fileObj = document.getElementById(fileId);
   if ( fileObj == null ) return false;

   var brObj = document.getElementById(brId);
   if ( brObj ==null ) return false;

   var delObj = document.getElementById(delId );
   //alert(  "del delId: " + delObj  );
   if ( delObj == null ) return false;

       //second,create the replace element
   var temp= document.createElement("SPAN");
   //third,replace it
    span.replaceChild(temp,fileObj);
span.replaceChild(temp,brObj);
// Added by Harry, Repair Remove attached bug 2005/04/04
span.removeChild(delObj.previousSibling);
var attach = document.getElementById("attach");
if(span.getElementsByTagName("INPUT").length == 1) attach.childNodes[0].nodeValue='添加附件';
// End
span.replaceChild(temp,delObj);

return false;
}

頁面上用

<form name=sendmail>
<SCRIPT src="attach.js"></SCRIPT>
<A id=attach  οnclick="add();this.childNodes[0].nodeValue='繼續添加附件';"  href="javascript:;" name=attach>添加附件</A><SPAN  id=idfilespan></SPAN>
</form>