对象名修改控件解决方案
日期：2014-05-16 浏览次数：20422 次
对象名修改控件
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消失.
多次尝试未果,请高手不吝指教!
谢谢!
------解决方案--------------------
不用吧...
代码:
<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>
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消失.
多次尝试未果,请高手不吝指教!
谢谢!
------解决方案--------------------
不用吧...
代码:
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
