Question

JS点击文字后变为输入框编辑

<span id="it">内容</span> <a href="javascript:;" onclick="cg()">修改</a>

<script>
cg=function(){
var o=document.getElementById("it");
if(o.childNodes[0].value) {
o.innerHTML = o.childNodes[0].value;
}else{

o.innerHTML="<input type='text' value='"+document.getElementById("it").innerHTML+"' />";
}
}
</script>

，，如果有多个值呢？
比如说一条信息一排有5个编辑框。怎么做。

还有一个窗口中一列有十几条以上这样的信息。怎么修改这个js代码。

Answer 1

你好，可以将标签的id以序列或数组方式定义：

<span id="it1">内容</span> <a href="javascript:;" id="a1"  onclick="cg(this)">修改</a>
<span id="it2">内容</span> <a href="javascript:;" id="a2"  onclick="cg(this)">修改</a>
<span id="it3">内容</span> <a href="javascript:;" id="a3"  onclick="cg(this)">修改</a>
<span id="it4">内容</span> <a href="javascript:;" id="a4"  onclick="cg(this)">修改</a>
<span id="it5">内容</span> <a href="javascript:;" id="a5"  onclick="cg(this)">修改</a>
<script>
cg=function(obj){
var o=document.getElementById("it"+obj.id.toString().substr(1));
if(o.childNodes[0].value) {
o.innerHTML =  o.childNodes[0].value;
}else{
o.innerHTML="<input type='text' value='"+document.getElementById("it"+obj.id.toString().substr(1)).innerHTML+"' />";
}
}
</script>

Answer 2

<span>内容</span><a href="#0" onclick="cg(this)">修改</a><br/>
<span>内容</span><a href="#0" onclick="cg(this)">修改</a><br/>
<span>内容</span><a href="#0" onclick="cg(this)">修改</a><br/>
    
<script>
function cg(obj){
   var o=obj.previousSibling;
   if(o.childNodes[0].value) {
     o.innerHTML =  o.childNodes[0].value;
  }else{
    o.innerHTML="<input type='text' value='"+o.innerHTML+"' />";
  }
}
</script>

追问

如果不点击修改 直接点击 内容 是怎么样的代码呢，请问
我意思是把修改俩字去掉。 只显示内容。点击内容即可编辑。
鼠标或者键盘挪到其它地方就保存