不用ajax实现点击文字即可编辑的方法

刚接触creatElement ，appendChild 等东东！呵呵！
写了这个东西，可能在高手看来，非常的稚嫩！不过完全自己写的！
还没有完善，请大侠指导！！
看代码


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
  .test{border:1px solid #ccc;background-color:#eee;width:200px;height:60px;}
  </style>
  <script language="javascript">
  <!--
  function isIE(){ //ie? 
    if (window.navigator.userAgent.indexOf("MSIE")>=1) return true; 
    else return false; 
} 
if(!isIE()){ //firefox innerText define
    HTMLElement.prototype.__defineGetter__("innerText", 
        function(){ 
            return this.textContent; 
        } 
    ); 
    HTMLElement.prototype.__defineSetter__("innerText", 
        function(sText){ 
            this.textContent=sText; 
        } 
    ); 
}function $(e){
    return document.getElementById(e);
  }
 var arr=new Array();
 function check(e){
 var v=0;
    for(i=0;i<arr.length;i++)
    {if(arr[i]==e) v=1;
    else v=0;}
    if(v) return true;
    else return false;
 }
 function edit(e){
    var x=$(e);
    var str=x.innerText;
    if (check(e))
    {
        //alert("已经存在在数组里！");
        //alert(str);
        var b=$(e+"fa");
        str=$(e+"faz").value;
        b.removeChild($(e+"faz"));
        x.innerText=str;
    }else{
        //alert("没有存在在数组里！");
        a1=document.createElement("div");
        a1.id=e+"fa";
        a=document.createElement("INPUT");
        a.name=e;
        a.id=e+"faz";
        a.value=str;
        x.innerHTML="";
        x.appendChild(a1);
        a1.appendChild(a);
        if(arr.length==0) arr[0]=e;
        else arr[arr.length]=e;
        //alert(a.name);
    }
  }
  -->
  </script>
 </HEAD>
 <BODY>
 <div class="test" id="test" onclick="edit('test')">可编辑的内容</div>
 <div class="test" id="test1" onclick="edit('test1')">可编辑的内容</div>
 </BODY>
</HTML>

最后解决浏览器问题的代码

New Document

body{font-size:14px;}
input{border:none;font-size:14px;}
.show{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;}
.hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;}

唉！！忙了一晚上，就这么解决了！！嘻嘻 呵呵
郁闷!

在firefox下 由于DOM有很小的差异，含有input的div中除标签内的空格外

不能有空格因为我们用的是childNodes[0]!否则需要点两下！

可编辑的内容一

可编辑的内容二

可编辑的内容三

可编辑的内容四

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

赞 (0)

相关推荐

  • ajax实现点击不同的链接让返回的内容显示在特定div里

    /* 以下代码通过ajax实现在一个web页面点击不同的链接,然后将返回的结果显示在该页面固定的div里. */ <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script language="javascript"> var http_request = false; function create

  • Jquery AJAX 用于计算点击率(统计)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> </HEAD> <BODY> <script src="jquery.js" type="text/javascript"></

  • php ajax网站浏览统计功能的简单实现第1/2页

    使用PHP语言实现,如果你看不明白,请留言.... 相信原理都差不多.. 为什么使用PHP做范例语言? 不外乎两个因素: 1. PHP语法通俗易懂,有一点程序基础的人就可以了解;2.代码量比较少 本功能实现的代码的目录结构见 [ajax实时任务提示功能的实现 -- vb2005xu自己动手系列(1)],这个可以作为它的插件插入,这里也是阐述一种开发思想:在网站开发的过程中,功能是逐步添加的,一开始并不能也不可以做到尽善尽美的设计.建议在刚开始的时候规划好项目的结构,后期好使用插件扩展功能实现..

  • php+ajax实现的点击浏览量加1

    下面就分享一段相对完整的能够在实际应用中派上用场的代码,此代码是ajax结合php代码实现的. 一.ajax代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>ajax实现浏览量点击增加</title> <script type="text/javascript"> var xmlhttp=false;

  • 不用ajax实现点击文字即可编辑的方法

    刚接触creatElement ,appendChild 等东东!呵呵! 写了这个东西,可能在高手看来,非常的稚嫩!不过完全自己写的! 还没有完善,请大侠指导!! 看代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>   <st

  • jquery实现点击文字可编辑并修改保存至数据库

    jquery实现点击文字可编辑并修改保存至数据库

    这个方法网上可以查到很多,但是好多只有点击文字编辑并保持,但是没有完整的代码写怎么保存到数据库.因为本人才疏学浅,费啦好长时间才写好把修改的内容只用一条sql语句保存到数据库,今天在这里和大家分享 这是运行图片  这是前台页面 03.aspx页面 复制代码 代码如下: <table id="MyTable" cellspacing="1" cellpadding="3"> <asp:Repeater ID="reord

  • 一个有意思的鼠标点击文字特效jquery代码

    一个有意思的鼠标点击文字特效jquery代码

    今天在[幻想's Blog]看到一段比较喜欢的鼠标点击文字特效JS代码,感觉很不错就用到博客上来了!喜欢的站长也可以用一下感觉一下! 只需将如下JS代码放到</body>之前即可. <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a =

  • Easy UI动态树点击文字实现展开关闭功能

    只需要在JSP处,点击树的函数中,添加一段代码即可: 整体如下: <span style="white-space:pre"> </span>$("#tt").tree({ onClick: function(node){ if(node.url != null){ parent.frames["content"].location.href="${ctx}" rel="external no

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 使用Jquery实现点击文字后变成文本框且可修改

    使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改. 1.点击文字变为文本框 2.文本框自动全选文字 3.对文本框内容进行修改 4.点击文本框以外的地方文本框再次变为修改后的文字 5.同步更新SQL数据库内容 Html部分代码 复制代码 代码如下: <table width="200"> <tr> <td><b>ID</b></td> <td><b>名称</b>&

  • element-ui直接在表格中点击单元格编辑

    element-ui直接在表格中点击单元格编辑

    目录 实现效果 实现代码 最近由于公司开始使用elementUI,开发的过程中需要用到对表格的单元格进行编辑,下面是我自己实现表格可编辑的方式,感兴趣的可以了解一下 实现效果 编辑之后对应表格数据该字段值也就发生了变化,控制台输出所有数据即可查看变化 实现代码 1.自定义编辑组件 <template> <div class="editCell"> <div class="canEdit" v-if="CanEdit"

  • iOS点击文字按钮变转圈加载效果

    iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • 点击文字链接弹出确认框基于js Confirm实现

    链接确认警告 function winconfirm(){ question = confirm("你确认要访问我们吗?") if (question != "0"){ window.open("http://www.jb51.net") } } 点击文字看效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS实现点击文字对应DIV层不停闪动效果的方法

    本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

随机推荐