<html>

<head>

  <meta charset="utf8">

  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">

  </script>

<script type="text/javascript">

  $(document).ready(function(){

        // alert(0);

    $("#div_input").dblclick(function(){

      // alert(0);

      //  $(this).hide();

       $("#text_input").val($("span").html());

         $("span").hide();;

         $("#text_input").show().focus();

    });

    $("#text_input").blur(function(){

      $("span").html($(this).val()).show();

      $("#text_input").hide();

    });

    $("#table1 td").dblclick(function(){

      var td = $(this); //获取当前的td

      // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整

      var text = td.text(); //获取当前td里的内容

        // alert(text);

      var txt = $("<input type='text'>").val(text); //当前td里的值放放input的框里

      td.text(""); //清空td的值

      td.append(txt); //向当前td里插入input框

      txt.blur(function(){

          // 失去焦点，保存值。于服务器交互自己再写,最好ajax

          var newText = $(this).val();

          // 移除文本框,显示新值

          $(this).remove();

          td.text(newText); //新值放入当前td里

          alert('修改成功');

      });

    });

  });

</script>

</head>

<body>

<div id="div_input" style="width:152px;height:22px;border:1px solid #369;">

<span style="overflow: hidden;">12123aa</span>

<input id="text_input" type="text" style="display:none;width:152px;height:22px;overflow: hidden;" name="" value="123">

</div>

<div>

<table id="table1" border="1">

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

</div>

</body>

</html>

双击内容变input框可编辑，失去焦点后修改的数据异步提交的更多相关文章

  1. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  2. 简单ALV得演示（用到了ALV可编辑及保存后修改数据库）

    *&---------------------------------------------------------------------* *& Report YPMRP010_ ...

  3. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  4. 当滚动列表的时候，让input框失去焦点（移动端会收起键盘）

    1.拓展scroll.vue事件 beforeScroll:{ type:Boolean, default:false } if(this.beforeScroll){//滚动列表的时候收起键盘(移动 ...

  5. 【JS】实时监控页面，input框数值自动求和

    需求: 有一个页面需要将input框填入的各个费用自动相加,添加到“合计费用”里. 解决方案: 使用jquery的blur实践,每个费用的Input框检测到失去焦点时,将所有的input框数值相加求和 ...

  6. C# 双击ListView出现编辑框可编辑，回车确认

    原文:C# 双击ListView出现编辑框可编辑,回车确认 //获取鼠标点击的项------API [DllImport("user32")] public static exte ...

  7. HTML：<input type="text">文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

  8. [Selenium] 使用Javascript选中Input框里的内容，然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  9. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...

随机推荐

  1. BZOJ 1123 && Luogu P3469 [POI2008]BLO-Blockade 割点+乘法原理

    想了半天式子...最后在邓大师的帮助下想出此题....QWQ我还是太菜了 对于一个非割点,ans+=2*(n-1); 对于一个割点,ans+= #include<cstdio> #incl ...

  2. HDU-1845-Jimmy's Assignment

    链接:https://vjudge.net/problem/HDU-1845 题意: 给一个有向图,求最大匹配. 思路: 有相图的最大匹配,可以通过加上反向边, 求这个无向图的最大匹配, 原图的最大匹 ...

  3. 定时任务crontab 详解

    cron 是一个可以用来根据时间.日期.月份.星期的组合来调度对重复任务的执行的守护进程. cron 假定系统持续运行.如果当某任务被调度时系统不在运行,该任务就不会被执行. 要使用 cron 服务, ...

  4. nodejs 实践：express 最佳实践 (一) 项目结构

    express 最佳实践 (一) 第二篇: express 最佳实践(二):中间件 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色 ...

  5. Spring的DI（Dependency Injection)

    写在之前,作为正在学习的程序员,对于Spring理解比较差,给两个简单的定义大家看一下. 控制反转(Inversion of Control),是一个重要的面向对象编程的法则来削减计算机程序的耦合问题 ...

  6. GoDaddy网站程序根目录 网站文件上传到虚拟主机哪个目录

    用的linux虚拟主机,网站根目录为public_html,(window主机的目录为httpdocs)我们需要把本地做好的网站上传到此目录下 cPanel控制面板 - 文件管理器 - public_ ...

  7. OCX和DLL的区别

    转自:http://blog.csdn.net/scucj/archive/2006/06/29/852181.aspx OCX和DLL的区别 一.关于DLL的介绍      DLL,动态链接库,Dy ...

  8. POJ 1185 炮兵阵地 （状压DP，轮廓线DP）

    题意: 给一个n*m的矩阵,每个格子中有'P'或者'H',分别表示平地和高原,平地可以摆放大炮,而大炮的攻击范围在4个方向都是2格(除了自身位置),攻击范围内不能有其他炮,问最多能放多少个炮?(n&l ...

  9. UVA 562 Dividing coins 分硬币（01背包，简单变形）

    题意:一袋硬币两人分,要么公平分,要么不公平,如果能公平分,输出0,否则输出分成两半的最小差距. 思路:将提供的整袋钱的总价取一半来进行01背包,如果能分出出来,就是最佳分法.否则背包容量为一半总价的 ...

  10. Classes and metaclasses

    http://www.sealiesoftware.com/blog/archive/2009/04/14/objc_explain_Classes_and_metaclasses.html Obje ...