js控制添加文本框

项目中碰到需要在前台动态加入文本框的问题，在参考163邮件里面带的js，我做了自己的修改和调整。列举代码如下 
// JScript 文件

// 增加option函数，增加到 idoptionspan,基数为 attaIdx 。


var optionids = new Array(); //option的id集合
var optionvalues = new Array();//option的value集合

var opIdx = 0;
var IsIE;

//测试浏览器是否为ie
function fInitMSIE(){
    if (navigator.userAgent.indexOf("MSIE") != -1){
        IsIE = true;
    }
    else{
        IsIE = false;
    }
}

fInitMSIE();

function add() {

 addoption("idoptionspan",opIdx);
 opIdx++;
 return false;
}

function exist(Id) {
      var txtoption = document.getElementById(Id);
   var result = false;
   if ( txtoption !=null ) {
   result = true;
   }
   if( result)
   {
  alert("系统异常，请刷新该页面");
   }
}//end of function

//delete the both sides space
function lrtrim(lchar)     
{  
 var li,ri,l_i,r_i,returnvalue;
 returnvalue="";
 for(li=0;li<lchar.length;li++)
 {
  if(lchar.substring(li,li+1)!=" ")
  {
   l_i=li;
   break;
  }
  
 }
 for(ri=lchar.length;ri>0;ri--)
 {
  if(lchar.substring(ri-1,ri)!=" ")
  {
   r_i=ri;
   break;
  }
  
 }
 returnvalue=lchar.substring(l_i,r_i);
 return(returnvalue);
}

//addoption(spanId,index) 普通增加选项，spanId是容器id，index实际是个数。
function addoption(spanId,index)
{
       var strIndex = "" + index;
    var optionId = "option"+ strIndex;
    var brId = "idOptionBr" + strIndex;
    addoptioncontrol(spanId,optionId);

    adddel(spanId,index);

    addbr(spanId,brId);
    //document.getElementById( "attachfile"+ strIndex).click();
    return;
}
//end function

// 添加选项文本框和标签 addoptioncontrol(spanId,optionId) spanId是容器id，optionId是文本框的id由index产生
function addoptioncontrol(spanId,optionId)
{
   var span = document.getElementById(spanId);
   if ( span !=null ) {
    var oTextNode = document.createElement("SPAN");
        oTextNode.id = "idTitle"+optionId.substr(6,8);
   oTextNode.style.width = "40px";
   oTextNode.innerText = '选项  ';
   span.appendChild(oTextNode);
                 if ( !IsIE ) {
      var optionObj = document.createElement("input");
      if ( optionObj != null ) {
       optionObj.type="text";
       optionObj.name = optionId;
       optionObj.id = optionId;
       optionObj.size="50";
       optionObj.oindex = optionId.substr(6,8);
       //var clickEvent = "exist('" + optionId + "')";
       //fileObj.setAttribute("onclick",clickEvent,0); 
       span.appendChild(optionObj);
      }//if fileObj
     }// !IsIE

     if ( IsIE ) {
      var optionTag = "<input type='text' id ='" + optionId + "'oindex='"+optionId.substr(6,8)+" name='" + optionId + "' size=160px />";
      var optionObj = document.createElement(optionTag);
      span.appendChild(optionObj);
     }//IsIE if
   
   }//if span
}//end function

// 添加删除按钮以及绑定 删除按钮的单击事件
function adddel(spanId,index)
{
      var strIndex = "" + index;
   var delId = "idOper" + 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='button' id='" + delId + "' onclick=deloption('" + 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 deloption('" + spanId + "',"+strIndex+");";
     delObj.setAttribute("onclick",clickEvent); 
     span.appendChild(delObj);
    }//if
   }// !IsIE if
   if( delObj != null) delObj.value = "删除";
  }//main if
  return;
}//end function

//删除一个选项相关的所有控件（文本框，标签，一个br，一个删除按钮）
function deloption(spanId,index)
{
    var strIndex = "" + index;
    var optionId = "option"+ strIndex;
    var brId = "idOptionBr" + strIndex;
    var delId = "idOper" + strIndex;
    var titleId = "idTitle" +strIndex;
    //first,get the element
       var span = document.getElementById(spanId);
    //alert(  "del span: " + span  );
    if ( span == null ) return false;

    var optionObj = document.getElementById(optionId);
    if ( optionObj == 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.removeChild(optionObj.previousSibling);
     span.replaceChild(temp,optionObj);
  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); 
  opIdx  = opIdx-1;
  return false;
}// end function

//check data if is null
function check_null(tCHAR)   
{
 aa=false;
 
 for(iINT=0;iINT<tCHAR.length;iINT++)
    {           
        if(tCHAR.substring(iINT,iINT+1)!=" ") 
  {
      aa=true;
   break;
  }
 }
  
 if(aa==false || tCHAR.length<1)
 {
  return false;
 }

 return true;  
}


//得到所有选中的选项的值，如果选项文本框不是后台数据库的数据产生则加入到隐藏域，否则更改或添加相应域。
function getoptionvalue()
{
      var str = '';
      var oSpan = document.getElementById("idoptionspan");
   if(oSpan){
  var options = oSpan.getElementsByTagName("INPUT");
  for(var i=0,m=options.length;i<m;i++){
   if(options[i].type == "text" && options[i].value !=""){
          if((!check_null(options[i].value))||(options[i].value =="undefined"))
          {
             document.getElementById("hiddOptionID").value="";
             document.getElementById("hiddOptionValue").value="";
             document.getElementById("hiddenElse").value = "";
             alert("选项名称不能为空，请删除该项或者填写选项名称");
             break;
          } 
       if(options[i].useron !=null)
         setNewValueByID(options[i].id,lrtrim(options[i].value));
       else
        {
           if(str == '')
           {
               str = lrtrim(options[i].value);
           }
           else
           {
               str = str+"`"+lrtrim(options[i].value);
           }
        }
   }
  }
   if(optionids.length >0)
     document.getElementById("hiddOptionID").value=JoinStr(optionids);
   if(optionvalues.length>0)
     document.getElementById("hiddOptionValue").value=JoinStr(optionvalues);
   document.getElementById("hiddenElse").value = str;
 }
}//end function

function setNewValueByID(id,value)
{
   for(var i=0;i<optionids.length;i++)
   {
      if(optionids[i] == id)
      {
         optionvalues[i] = value;
         break;
      }
   }
}

function JoinStr(arr)
{
   var str='';
   for(var i=0;i<arr.length;i++)
   {
      if(str=='')
        str = lrtrim(arr[i]);
      else
        str = str+'`'+lrtrim(arr[i]);
   }
   return str;
}

//------------------------根据后台数据库添加选项控制－－－－－－－－－－－－－－－－－－－
function SetDBOption()
{
    var arrOptionID = document.getElementById('hiddOptionID').value.split('`');
 
    var arrOptionValue = document.getElementById('hiddOptionValue').value.split('`');

   var optionLength= arrOptionID.length;
   var optionID;
   var optionValue;
   var strIndex ;
   var brId;
  // alert("xxxx");
   for(var i=0;i<optionLength;i++){
      opIdx = opIdx + 1;
      optionID =arrOptionID[i];
      optionValue = arrOptionValue[i];
      addUserOption('idoptionspan',optionID,optionValue);
     
      strIndex = ""+opIdx;
      adddbdel('idoptionspan',opIdx,optionID);
      brId = "idDBBr" + strIndex;
      addbr('idoptionspan',brId);
     
     
   }
}
//------------------------end function－－－－－－－－－－－－－－－－－－－


//-----------------------------------根据后台db数据库加载option－－－－－－－－－－－－－－－－－－－－－－－－
function addUserOption(spanId,optionId,optionvalue)
{
    var span = document.getElementById(spanId);
   if ( span !=null ) {
    var oTextNode = document.createElement("SPAN");
        oTextNode.id = "idTitle"+""+opIdx;
   oTextNode.style.width = "40px";
   oTextNode.innerText = '选项  ';
   span.appendChild(oTextNode);
                 if ( !IsIE ) {
      var optionObj = document.createElement("input");
      if ( optionObj != null ) {
       optionObj.type="text";
       optionObj.name = optionId;
       optionObj.id = optionId;
       optionObj.value = optionvalue;
       optionObj.size="50px";
       optionObj.useron = "1";
       //var clickEvent = "exist('" + optionId + "')";
       //fileObj.setAttribute("onclick",clickEvent,0); 
       span.appendChild(optionObj);
      }//if fileObj
     }// !IsIE

     if ( IsIE ) {
      var optionTag = "<input type='text' id ='" + optionId + "' name='" + optionId + "' useron='1' size=50px value='"+optionvalue+ "'  />";
      var optionObj = document.createElement(optionTag);
      span.appendChild(optionObj);
     }//IsIE if
   
   }//if span
}
//-----------------------------------end function－－－－－－－－－－－－－－－－－－－－－－－－

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);
            }//if
     }//if
  return;
}

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


function adddbdel(spanId,index,optionid)
{
   var strIndex = "" + index;
   var delId = "idOper" + 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='button' id='" + delId + "' onclick=deluseroption('" + spanId + "',"+strIndex+",'"+optionid+"')></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 deluseroption('" + spanId + "',"+strIndex+",'"+optionid+"');";
     delObj.setAttribute("onclick",clickEvent); 
     span.appendChild(delObj);
    }//if
   }// !IsIE if
   if( delObj != null) delObj.value = "删除";
  }//main if
  return;
}


//---------------------------------------------根据后台数据库数据删除按钮－－－－－－－－－－－－－－－－－－－
function deluseroption(spanid,index,optionID)
{
   if(!window.confirm('您确定要彻底删除该选项？'))
     return false;
    var strIndex = "" + index;
    var brId = "idDBBr" + strIndex;
    var delId = "idOper" + strIndex;
    var span = document.getElementById(spanid);
    //alert(  "del span: " + span  );
    if ( span == null ) return false;
    var optionObj = document.getElementById(optionID);
    if ( optionObj == 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;
   
 var temp= document.createElement("SPAN");
    //third,replace it
 
    span.removeChild(optionObj.previousSibling);
 span.replaceChild(temp,optionObj);
    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); 
 
 var del = document.getElementById('hiddenDel');
 if(del.value != '')
    del.value = optionID;
 else
    del.value = del.value + ','+optionID;
 
 opIdx  = opIdx-1;
 return false;
}
//---------------------------------------------根据后台数据库数据删除按钮－－－－－－－－－－－－－－－－－－－

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ocean2000/p/795172.html