关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > 网页特效 > 布局与层 > 在线编辑网页文字

可在线编辑网页文字效果代码(单击)

2013-03-02 23:37:50 作者：

可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下

<style type="text/css">

</style>
<center>
<div id="aa"></div>
<table width="80%" id="tab1"  border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event.srcElement)" style="border:9px 
groove lime;">
  <tr>
    <td width="20%" id="td1">脚本之家</td>
    <td width="20%">脚本之家</td>
    <td width="20%">脚本之家</td>
    <td width="20%">脚本之家</td>
    <td width="20%">脚本之家</td>
  </tr>
  <tr>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
  </tr>
  <tr>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
  </tr>
  <tr>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
    <td>www.jb51.net</td>
  </tr>
  <tr>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
  </tr>
</table>
</body>
</html>
<script>
oldObj="";
var newNode=document.createElement("input");
newNode.type="text";
function setEdit(click_td){
var obj; 
if(click_td.tagName=="TD"){
if(oldObj!=""){
oldObj.removeChild(eval("tmpText"));
if(newNode.vlaue=="") oldObj.innerText=" ";
else oldObj.innerText=newNode.value;
}
obj=click_td;
oldObj=obj;
//newNode.width=obj.clientWidth;
//newNode.height=obj.clientHeight;
newNode.width=obj.offsetWidth;
newNode.height=obj.offsetHeight;
newNode.id="tmpText";
newNode.value=obj.innerText;
obj.innerText="";
obj.appendChild(newNode);
newNode.focus();
}
}
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]