1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <script src="./js/jquery.js"></script>

 5 <script>

 6 $(function(){

 7     $("#table").find("td").bind("dblclick",function(){  

 8         var input ="<input type='text' id='temp' value="+$(this).text()+" >";  

 9         $(this).text("");  

         $(this).append(input);  

         $("input#temp").focus();  

         $("input").blur(function(){  

             if($(this).val()==""){  

                 $(this).remove();  

             }else{  

                 $(this).closest("td").text($(this).val());  

             }  

         }); 

     })

 })

 function ShowElement(element)

 {

     var oldhtml = element.innerHTML;

     var newobj = document.createElement('input');//创建新的input元素

     newobj.type = 'text';//为新增元素添加类型

     newobj.onblur = function(){

         element.innerHTML = this.value ? this.value : oldhtml;//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 

     }

     element.innerHTML = '';

     element.appendChild(newobj);

     newobj.focus();

 }

 </script>    

 </head>

 <body>

 <table border="1" width="200" id="table">  

     <tr><td>111</td></tr>  

     <tr><td>222</td></tr>  

     <tr><td>333</td></tr>  

     <tr><td>444</td></tr>  

     <tr><td>555</td></tr>  

 </table> 

 <dl>

   <dt>你的用户名:</dt>

   <dd ondblclick="ShowElement(this)">三人行团队</dd>

   <dt>你的个性档</dt>

   <dd ondblclick="ShowElement(this)">我闪故我在</dd>

 </dl>

 </body>

 </html>

JQuery 双击动态编辑的更多相关文章

  1. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  2. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  3. Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

    实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...

  4. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  5. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  6. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  7. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  8. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  9. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

随机推荐

  1. 在PreferenceAcitity中使用Fragement时避免额外的Left和RightPadding

    On Android 4.4 遇到过这种问题: 注意到.上面的ActionBar部分的左右各有48像素的padding. 要了解该问题的成因,要首先了解其结构: 该页面的Activity是一个Pref ...

  2. 自制的React同构脚手架

    代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...

  3. JS 导出Table为excel的三种可行方法

    [html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. Android 网络状态的监控

    1 http://www.cnblogs.com/qingblog/archive/2012/07/19/2598983.html 2

  5. 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  6. 如何从一个1G的文件中找到你所需要的东西

    如何从一个1G的文件中找到你所需要的东西,这个问题貌似面试的时候会经常问到.不过不论你用什么语言,肯定逃脱不了按指针读或者按块读. 这里介绍python的用法.本人亲自实验了,速度还可以. 如果你的文 ...

  7. idea新建项目打包 ，运行jar，并放入maven仓库

    1.新建项目(转自:http://www.cnblogs.com/wql025/p/5215570.html) 创建一个新Maven项目 new 一个project 不选择任何Maven模板 起个Gr ...

  8. Nginx日志配置与切割

    访问日志主要记录客户端访问Nginx的每一个请求,格式可以自定义.通过访问日志,你可以得到用户地域来源.跳转来源.使用终端.某个URL访问量等相关信息. Nginx中访问日志相关指令主要有两条,一条是 ...

  9. Junit 内部解密之二： TestResult + TestListener + Assert

    转自:http://blog.sina.com.cn/s/blog_6cf812be0100wbhw.html 之前我们看到了Test接口里面的run方法有个TestResult的参数,不错,这个类就 ...

  10. DataUml Design 教程1-初识

        DataUml Design 是面向开发人员使用的一个永久免费的软件,提高软件的开发效率和代码的规范度.它主要包括三大功能,数据模型.代码生成和UML建模,数据模型功能类似于PowerDesi ...