87,918
社区成员
发帖
与我相关
我的任务
分享对象名修改控件
DOM:
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
需求:
点击任何一个LI的时候,该对象变为一个FORM,包含一个TEXT(其VALUE为A的innerHTML)和一个SUBMIT,submit之后该对象变为修改后的值,form消失.
多次尝试未果,请高手不吝指教!
谢谢!
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
需求:
点击任何一个LI的时候,该对象变为一个FORM,包含一个TEXT(其VALUE为A的innerHTML)和一个SUBMIT,submit之后该对象变为修改后的值,form消失.
多次尝试未果,请高手不吝指教!
谢谢!
...全文
请发表友善的回复…
发表回复
shadelin 2007-04-18
- 打赏
- 举报
谢谢GladisionBoy的方案
mmcgzs 2007-04-05
- 打赏
- 举报
form+iframe可以轻松实现
GladisionBoy 2007-04-05
- 打赏
- 举报
看出来了.....这是在类似AJAX那种应用..
我去写写看
我去写写看
梅雪香 2007-04-05
- 打赏
- 举报
直接在ul外加个form就是了,干嘛要消失,非要把1+1换算成1+100000*0+1你才高兴啊?
GladisionBoy 2007-04-05
- 打赏
- 举报
不用吧...
代码:
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test 7 - 原位编辑</title>
<script type="text/javascript">
// Code by Hidden, Inner Group (CSDN: gladisionboy)
var formnode=null;
var prevEdit=null;
window.onload=function () {
formnode=ajaxList_post.removeNode(true);
formnode.onsubmit=onaftereditinplace;
formnode.style.display="inline";
for(var i=0; i<ajaxList.childNodes.length; i++) {
ajaxList.childNodes[i].childNodes[0].onclick=onbeforeeditinplace;
}
}
function onbeforeeditinplace() {
if(prevEdit)
return false;
var a=event.srcElement;
a.style.display="none";
a.insertAdjacentElement("afterend", formnode);
ajaxList_post.ajax_value.value=a.innerHTML;
prevEdit=a;
return false;
}
function onaftereditinplace() {
var a=ajaxList_post.previousSibling;
a.innerHTML=ajaxList_post.ajax_value.value;
formnode=ajaxList_post.removeNode(true);
a.style.display="";
prevEdit=null;
return false;
}
</script>
</head>
<body>
<form name="ajaxList_post" method="GET" style="display: none;">
<input type="text" size="40" value="" name="ajax_value" />
<input type="submit" value="修改" />
</form>
<ul id="ajaxList">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</body>
</html>
代码:
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test 7 - 原位编辑</title>
<script type="text/javascript">
// Code by Hidden, Inner Group (CSDN: gladisionboy)
var formnode=null;
var prevEdit=null;
window.onload=function () {
formnode=ajaxList_post.removeNode(true);
formnode.onsubmit=onaftereditinplace;
formnode.style.display="inline";
for(var i=0; i<ajaxList.childNodes.length; i++) {
ajaxList.childNodes[i].childNodes[0].onclick=onbeforeeditinplace;
}
}
function onbeforeeditinplace() {
if(prevEdit)
return false;
var a=event.srcElement;
a.style.display="none";
a.insertAdjacentElement("afterend", formnode);
ajaxList_post.ajax_value.value=a.innerHTML;
prevEdit=a;
return false;
}
function onaftereditinplace() {
var a=ajaxList_post.previousSibling;
a.innerHTML=ajaxList_post.ajax_value.value;
formnode=ajaxList_post.removeNode(true);
a.style.display="";
prevEdit=null;
return false;
}
</script>
</head>
<body>
<form name="ajaxList_post" method="GET" style="display: none;">
<input type="text" size="40" value="" name="ajax_value" />
<input type="submit" value="修改" />
</form>
<ul id="ajaxList">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</body>
</html>
