浏览 9276 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-13
页面源码
<!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.id="configure"; 设置Id属性 2 A.setAttribute("onclick","removeInput(p.id)"); 解决方案： A.onclick = function (){removeInput(p.id);}; 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-13
这个问题可以使用jQuery很好的解决啊
比如： var a = document.createElement("input") $(a).attr("name","test"); |
| 返回顶楼 | |
