关于动态创建表单元素，做不下去了，附图片，求助

图1
当点击对应的“修改”时变成这样
图2
但是当鼠标没有点击到这一行上时，表单元素就全部移去，还原成图1的效果下面是我写的代码，只实现了按钮部份，相应行的文本框不知道怎么搞，我写的代码好像有点麻烦，不知道有简单化的不<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
td{ width:100px; text-align:center;font:12px Arial, Helvetica, sans-serif; height:20px;}
input{ float:left; border:1px solid #666666;margin-left:10px; display:inline;}
</style>
</head>
<body>
<table id="ok">
<tr bgcolor="#CCCCCC"><td>ID</td><td>名称</td> <td>名称2</td> <td>操作</td> </tr>
<tr><td>1</td> <td><input value="这里是名称1" /></td> <td><input value="这里是名称2" /></td> <td><a href="javascript:;" onclick="create(this)">修改</a></td> </tr>
<tr> <td>2</td> <td>这里是名称11</td> <td>这里是名称22</td> <td><a href="javascript:;" onclick="create(this)">修改</a></td> </tr>
</table>
<script type="text/javascript">
function create(str){
var tab=str.parentNode;
str.style.display="none";
var txt=document.createElement("input");
txt.type="button";
txt.value="提交";
txt.name="str";
txt.onclick=function(){
init('a.asp',info);//这里是调用init函数用AJAX提前表单
}
tab.appendChild(txt);
//*******************创建取取消按钮***********************//
var txt1=document.createElement("input");
txt1.type="button";
txt1.value="取消";
txt1.name="su";
txt1.onclick=function(){
tab.removeChild(txt1);
tab.removeChild(txt);
txt1=txt=null;
str.style.display="inline";
};
tab.appendChild(txt1);
}
</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{font:12px Arial, Helvetica, sans-serif; height:20px;}
td{text-align:center;}
input{ float:left; border:1px solid #666666;margin-left:10px; display:inline;}
</style>
</head>
<body>
<table id="ok">
<tr bgcolor="#CCCCCC">
<td width=50>ID</td>
<td width=150>名称</td>
<td width=150>名称2</td>
<td width=90>操作</td>
</tr>
<tr>
<td>1</td>
<td>这里是名称1</td>
<td>这里是名称2</td>
<td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>这里是名称11</td>
<td>这里是名称22</td>
<td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
</table>
<script type="text/javascript">
function  addBT(_this){
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML='<input value="'+obj.cells[1].innerHTML+'" />'
obj.cells[2].innerHTML='<input value="'+obj.cells[2].innerHTML+'" />'
_this.parentNode.innerHTML='<input type="button" value="提交" onclick="Submit(this)"><input type="button" value="取消" onclick="delBT(this)">'
}function delBT(_this){
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML=obj.cells[1].getElementsByTagName("input")[0].value
obj.cells[2].innerHTML=obj.cells[2].getElementsByTagName("input")[0].value
_this.parentNode.innerHTML='<a href="###" onclick="addBT(this)">修改</a>'
}function Submit(_this){
delBT(_this)
//init('a.asp',info);//实际使用时,去掉注释
}</script>
</body>
</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=gb2312" /> <title>无标题文档</title>
<style type="text/css">
td{ width:100px; text-align:center;font:12px Arial, Helvetica, sans-serif; height:20px;}
input{ float:left; border:1px solid #666666;margin-left:10px; display:inline;} </style>
</head>
<body>
<table id="ok">
<tr bgcolor="#CCCCCC">
<td>ID</td>
<td>名称</td>
<td>名称2</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><label>这里是名称1</label></td>
<td><label>这里是名称2</label></td>
<td><a href="javascript:;" onclick="create(this)">修改</a></td>
</tr>
<tr>
<td>2</td>
<td><label>这里是名称11</label></td>
<td><label>这里是名称22</label></td>
<td><a href="javascript:;" onclick="create(this)">修改</a></td>
</tr>
</table>
<script type="text/javascript">
function create(str){
var tab=str.parentNode; str.style.display="none";
var txt=document.createElement("input"); txt.type="button"; txt.value="提交";
txt.name="str";
txt.onclick=function(){ init('a.asp',info);//这里是调用init函数用AJAX提前表单
}
   tab.appendChild(txt);
   //----------创建两个文本框---------------------------------------
   var tr = str.parentNode.parentNode;
var td2 = tr.childNodes(1);
td2.childNodes(0).style.display="none";
var txt2=document.createElement("input");
txt2.type="text";
td2.appendChild(txt2);

var td3 = tr.childNodes(2);
td3.childNodes(0).style.display="none";
var txt3=document.createElement("input");
        txt3.type="text";
td3.appendChild(txt3);    //---------------------------------------------------

   //*******************创建取取消按钮***********************//
var txt1=document.createElement("input");
txt1.type="button";
txt1.value="取消";
txt1.name="su";
txt1.onclick=function(){
tab.removeChild(txt1);
tab.removeChild(txt);
txt1=txt=null;
str.style.display="inline";
//----------------------------
td2.childNodes(0).style.display="inline";
td3.childNodes(0).style.display="inline";
td2.removeChild(td2.childNodes(1));
td3.removeChild(td3.childNodes(1));
//----------------------------
};
tab.appendChild(txt1); }
</script>
</body>
</html>
test:<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{font:12px Arial, Helvetica, sans-serif; height:20px;}
td{text-align:center;}
input{ float:left; border:1px solid #666666;margin-left:10px; display:inline;}
</style>
</head>
<body>
<table id="ok">
<tr bgcolor="#CCCCCC">
    <td width=50>ID</td>
    <td width=150>名称</td>
    <td width=150>名称2</td>
    <td width=90>操作</td>
</tr>
<tr>
    <td>1</td>
    <td>这里是名称1</td>
    <td>这里是名称2</td>
    <td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
<tr>
    <td>2</td>
    <td>这里是名称11</td>
    <td>这里是名称22</td>
    <td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
</table>
<script type="text/javascript">
function  addBT(_this){
delAllBT()
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML='<input value="'+obj.cells[1].innerHTML+'" />'
obj.cells[2].innerHTML='<input value="'+obj.cells[2].innerHTML+'" />'
_this.parentNode.innerHTML='<input type="button" value="提交" onclick="Submit(this)"><input type="button" value="取消" onclick="delBT(this)">'
}function delAllBT(){
var obj=document.getElementById("ok").rows
for (var i=1;i<obj.length;i++){
var objInput=obj[i].cells[3].getElementsByTagName("input")[0]
if (objInput)delBT(objInput)
}
}function delBT(_this){
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML=obj.cells[1].getElementsByTagName("input")[0].value
obj.cells[2].innerHTML=obj.cells[2].getElementsByTagName("input")[0].value
_this.parentNode.innerHTML='<a href="###" onclick="addBT(this)">修改</a>'
}function Submit(_this){
delBT(_this)
//init('a.asp',info);//实际使用时,去掉注释
}</script>
</body>
</html>
test:
<!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=gb2312" />
<title>动态修改表(格)单元素</title>
<style type="text/css">
*{font:12px Arial, Helvetica, sans-serif; height:20px;}
td{text-align:center;}
input{ float:left; border:1px solid #666666;margin-left:10px; display:inline;}
</style>
</head>
<body>
<table id="ok">
<tr bgcolor="#CCCCCC">
    <td width=50>ID</td>
    <td width=150>名称</td>
    <td width=150>名称2</td>
    <td width=90>操作</td>
</tr>
<tr>
    <td>1</td>
    <td>这里是名称1</td>
    <td>这里是名称2</td>
    <td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
<tr>
    <td>2</td>
    <td>这里是名称11</td>
    <td>这里是名称22</td>
    <td><a href="###" onclick="addBT(this)">修改</a></td>
</tr>
</table>
<script type="text/javascript">
function  addBT(_this){
delAllBT()
var obj=_this.parentNode.parentNode
obj.cells[1].name=obj.cells[1].innerHTML
obj.cells[1].innerHTML='<input value="'+obj.cells[1].innerHTML+'" />'
obj.cells[2].name=obj.cells[2].innerHTML
obj.cells[2].innerHTML='<input value="'+obj.cells[2].innerHTML+'" />'
_this.parentNode.innerHTML='<input type="button" value="提交" onclick="Submit(this)"><input type="button" value="取消" onclick="delBT(this)">'
}function delAllBT(){
var obj=document.getElementById("ok").rows
for (var i=1;i<obj.length;i++){
var objInput=obj[i].cells[3].getElementsByTagName("input")[0]
if (objInput)delBT(objInput)
}
}function delBT(_this){
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML=obj.cells[1].name
obj.cells[2].innerHTML=obj.cells[2].name
_this.parentNode.innerHTML='<a href="###" onclick="addBT(this)">修改</a>'
}function Submit(_this){
var obj=_this.parentNode.parentNode
obj.cells[1].innerHTML=obj.cells[1].getElementsByTagName("input")[0].value
obj.cells[2].innerHTML=obj.cells[2].getElementsByTagName("input")[0].value
_this.parentNode.innerHTML='<a href="###" onclick="addBT(this)">修改</a>'
//init('a.asp',info);//实际使用时,去掉注释
}</script>
</body>
</html>