js完成点击编辑可以修改内容,可是只能编辑一次，怎么可以多次编辑。

半旧ad 2015-07-13 08:21:04

<!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>
<script>
window.onload = function() {
var oUl = document.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");

for(var i=0; i<oLi.length; i++) {
fn(oLi[i]);
}

function fn(oLi) {
var oSpan = oLi.getElementsByTagName("span")[0];
var oInput = oLi.getElementsByTagName("input")[0];
var str = "";

oInput.onclick = function() {
str = oSpan.innerHTML;
oLi.innerHTML = "<input type='text' value= " + str + " /><input type='button' value='确认' /><input type='button' value='取消' />";

var aInput = oLi.getElementsByTagName("input");
var str1="";

aInput[1].onclick = function() {
str1 = aInput[0].value;
oLi.innerHTML = "<span>" + str1 + "</span>" + "<input type='button' value='修改' />";
}

aInput[2].onclick = function() {
oLi.innerHTML = "<span>" + str + "</span>" + "<input type='button' value='修改' />";
}
}
}
}
</script>
<style>
h3 {
margin:0px;
width:500px;
line-height:30px;
background:#33FF99;
}
ul li {
margin:0px;
line-height:30px;
width:500px;
list-style:none;
border-bottom:1px solid #CCCCCC;
}
</style>
</head>

<body>
<ul>
<h3>分类名称</h3>
<li><span>大话数据结构</span><input type="button" value="修改" /></li>
<li><span>Web数据精髓</span><input type="button" value="修改" /></li>
<li><span>Linux基础学习</span><input type="button" value="修改" /></li>
</ul>
</body>
</html>

...全文

228 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hch126163 2015-07-14

打赏
举报

oLi.innerHTML = "<span>" + str + "</span>" + "<input type='button' value='修改' onclick='fn(this.parentNode)'/>";

Hello World, 2015-07-14

打赏
举报

修改按钮隐藏，不是被替换掉；修改完成或者取消后显示出来


            function fn(oLi) {
                var oSpan = oLi.getElementsByTagName("span")[0];
                var oInput = oLi.getElementsByTagName("input")[0];
                var str = "";

                oInput.onclick = function () {
                    str = oSpan.innerHTML;
                    oSpan.innerHTML = "<input type='text' value= " + str + " /><input type='button' value='确认' /><input type='button' value='取消' />";

                    oInput.style.display = 'none';

                    var aInput = oSpan.getElementsByTagName("input");
                    var str1 = "";

                    aInput[1].onclick = function () {
                        str1 = aInput[0].value;
                        oSpan.innerHTML = str1;
                        oInput.style.display = '';
                    }

                    aInput[2].onclick = function () {
                        oSpan.innerHTML =  str ;
                        oInput.style.display = '';
                    }
                }
            }

天际的海浪 2015-07-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=gb2312" /> <title>修改选项卡</title> <script> window.onload = function() { var oUl = document.getElementsByTagName("ul")[0]; var oLi = oUl.getElementsByTagName("li"); for(var i=0; i<oLi.length; i++) { fn(oLi[i]); } function fn(oLi) { var oSpan = oLi.getElementsByTagName("span")[0]; var oInput = oLi.getElementsByTagName("input")[0]; var str = ""; oInput.onclick = function() { str = oSpan.innerHTML; oLi.innerHTML = "<input type='text' value= " + str + " /><input type='button' value='确认' /><input type='button' value='取消' />"; var aInput = oLi.getElementsByTagName("input"); var str1=""; aInput[1].onclick = function() { str1 = aInput[0].value; oLi.innerHTML = "<span>" + str1 + "</span>" + "<input type='button' value='修改' />"; fn(oLi); } aInput[2].onclick = function() { oLi.innerHTML = "<span>" + str + "</span>" + "<input type='button' value='修改' />"; fn(oLi); } } } } </script> <style> h3 { margin:0px; width:500px; line-height:30px; background:#33FF99; } ul li { margin:0px; line-height:30px; width:500px; list-style:none; border-bottom:1px solid #CCCCCC; } </style> </head> <body> <ul> <h3>分类名称</h3> <li><span>大话数据结构</span><input type="button" value="修改" /></li> <li><span>Web数据精髓</span><input type="button" value="修改" /></li> <li><span>Linux基础学习</span><input type="button" value="修改" /></li> </ul> </body> </html>