当前位置：Gxlcms > JavaScript > 可在线编辑网页文字效果代码(单击)

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

时间：2021-07-01 10:21:17 帮助过：143人阅读

<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.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
  </tr>
  <tr>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
    <td>脚本之家</td>
  </tr>
  <tr>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</td>
    <td>www.gxlcms.com</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需刷新才能执行]

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

人气教程排行