`
litxuf
  • 浏览: 118987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js document.createElement 动态添加input与A标签的几个问题

    博客分类：
  • js
jQueryJavaScriptXHTMLJ#HTML 
阅读更多

 页面源码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>ccccc</title>

	</head>
	<body>
		<div class="place">
			<div id="board" style="padding-left: 15px">

				<form action="/test/asc.do?m=create" method="post"
					onsubmit="return check2();">
					<table class="add">

						<td align="right">
						</td>
						<td align="left">
							<span id="upload">
								<div id="div_0">
									<input type="text" style="height: 16px" size="30"
										name="configure" />
									<a href='javascript:void(0)' onclick="removeInput2('div_0')">删除</a>
								</div> </span>
						</td>
						</tr>
						<tr>
							<td colspan="4" class="add">
								<input type="button" name="button" value="ADD"
									onclick="createInput()">
								<input type="button" name="button" value="ADD2"
									onclick="createInput2()">
								<input type="button" name="button" value="cs" onclick="cs()" />
							</td>
						</tr>
						<tfoot>
							<tr>
								<td></td>
								<td>
									<input type="text" name="userId2" />

									<input type="submit" class="button" id="Submit1" value="确定" />
								</td>
							</tr>
						</tfoot>
					</table>
</html>
</div>
</div>
<script>
			var div0_outerHTML=document.getElementById("div_0").outerHTML;
         	 var i=1; 
            
            function createInput2(){
           		 alert(div0_outerHTML);
            	var div_outerHTML = div0_outerHTML.replace(/_0/g, "_"+i);
				var shtml=document.getElementById("upload").innerHTML;
				document.getElementById("upload").innerHTML = shtml + div_outerHTML;
            	i++;
            }
            
          function removeInput2(DIVID){
          var aElement = document.getElementsByName("configure"); 
          if(aElement.length==1){
            	alert("最后的数据 不要删除");
          	return ;
          }
          	 document.getElementById(DIVID).outerHTML="";
          }
          
          function createInput(){   
	             var p=document.createElement("div"); 
	             p.id="div"+i;
	             var aElement=document.createElement("input");   
	             //aElement.name="configure"; 
	             aElement.setAttribute("name","configure");
	             aElement.id="configure";
	             aElement.type="text"; 
	             aElement.size="30"; 
	           
            var A = document.createElement("A");  
	            A.onclick = function (){removeInput(p.id);}; 
				A.setAttribute("href","javascript:void(0)");   
				A.appendChild(document.createTextNode("删除"));  
				p.appendChild(aElement); 
			    p.appendChild(A);  
             if(document.getElementById("upload").appendChild(p) == null) 
                { 
                      return false; 
                 } 
                    i++;
               return true; 
          } 
             function removeInput(divid){ 
               var aElement = document.getElementById("upload");
               var parent= document.getElementById(divid);
               alert(divid);
               alert(parent)
               alert(parent.id);
                if(aElement.removeChild(parent) == null) {
                    return false; 
                }
                return true;   
            } 
      
　　　　function check2(){ 
              var aElement = document.getElementsByName("configure"); 
              alert(aElement);
              alert(aElement.length);
              for(j=0;j<aElement.length;j++){
              	alert(aElement[j].value)
             } 
        
          return true;
       } 
　　　
	function cs(){
	alert( document.getElementById("upload").outerHTML);
	}
	
	
　</script>


</body>
</html>

        

 

 document.createElement 动态添加 input与A有如下两个问题(IE7)

 

  1.  var aElement=document.createElement("input");  
             //aElement.name="configure";
             aElement.setAttribute("name","configure");
            上述方法 name属性无法赋值

    解决方案:aElement.id="configure"; 设置Id属性

2  A.setAttribute("onclick","removeInput(p.id)");  

 解决方案：   A.onclick = function (){removeInput(p.id);};

分享到：
| 提交多行数据到Struts的ActionForm的List属 ...
评论
1 楼 skyremark 2010-01-13  
这个问题可以使用jQuery很好的解决啊

比如：
var a = document.createElement("input")
$(a).attr("name","test");
发表评论

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

相关推荐

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