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

ttx9n · 发表于 2013-3-2 23:37:50

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

<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需刷新才能执行]

lba36h7g · 发表于 2022-9-23 13:14:16

vcxvcxv

locopy · 发表于 2022-12-10 13:32:34

vcxvcxv

uj9lpc · 发表于 2023-4-12 09:59:48

很好，谢谢分享

5ble0ks · 发表于 2023-6-24 03:32:33

哈哈哈哈哈哈哈

123456 · 发表于 2023-8-18 12:48:30

挺不错的东西

u6h2m4 · 发表于 2024-3-2 07:29:25

很好，谢谢分享

回复用户5 · 发表于 2024-3-21 21:58:39

激动人心，无法言表！

Anthonylam · 发表于 2024-3-31 19:23:24

先把创新班才能下班才能下班

64000928 · 发表于 2024-6-16 16:09:37

啦啦啦啦啦啦哈哈哈

账号		自动登录	找回密码
密码			立即注册

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

相关帖子