//先不多说这里上我的页面

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>双击td变成text文本框</title>

     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

 </head>

 <body>

     <div class="widget-content nopadding" id="Mydiv">

                             <table class="table table-bordered data-table table-hover">

                                 <thead>

                                     <tr>

                                         <th>ID</th>

                                         <th style="width: 200px;">Login Name</th>

                                         <th style="width: 200px;">Pass Word</th>

                                         <th style="width: 200px;">Email</th>

                                         <th>Date</th>

                                     </tr>

                                 </thead>

                                 <tbody class="tbody">

                                         <tr>

                                             <td id="id">1</td>

                                             <td id="loginName">HYX15517551511</td>

                                             <td id="password">123456</td>

                                             <td id="Email">15517551511@126.com</td>

                                             <td id="CDate">2014-01-01</td>

                                         </tr>

                                         <tr>

                                             <td>2</td>

                                             <td>JJKK</td>

                                             <td>123456</td>

                                             <td>JJKK@126.com</td>

                                             <td>2014-02-02</td>

                                         </tr>

                                         <tr>

                                             <td>3</td>

                                             <td>GGMM</td>

                                             <td>123456</td>

                                             <td>GGMM@126.com</td>

                                             <td>2014-03-03</td>

                                         </tr>

                                 </tbody>

                             </table>

                         </div>

 </body>

 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

 <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 <!-- 自己定义的JS文件 -->

 <script src="js/MyJS.js"></script>

 </html>

//这里就是我的MyJS文件了

 $(document).ready(function() {

     // Stuff to do as soon as the DOM is ready;

     /*var numId = $(".tbody td");*/  //获取每一行每一个td

     //获取每一行第二个td

     var numId=$(".tbody tr td:nth-child(2)").each(function(){

             });

     numId.dblclick(function(){

         var tdIns=$(this);

         var tdpar=$(this).parents("tr");

         var tdId=$(this).attr("id");

         /*alert(tdId);*/

         tdpar.css("backgroundColor","yellow");

         if(tdIns.children("input").length>0){

             return false;

         }

         var text = $(this).html();

         var inputIns = $("<input type='text'/>"); //需要插入的输入框代码

         inputIns.width(tdIns.width);//设置input与td宽度一致

         inputIns.height("36px");

         inputIns.val(tdIns.html());//将本来单元格td内容copy到插入的文本框input中

         /*alert(tdId);*/

         tdIns.html(""); //删除原来单元格td内容 

         inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中 

         inputIns.click(function(){

             return false;

         }); 

         //处理Enter和Esc事件

         inputIns.blur(function(){

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

         tdIns.html(inputText);

         tdpar.css("background-color","white");

                 // tdIns.html(text);

         alert(tdId);

             $.ajax({

                 type:"post",

                 url:"AjaxList",

                 data:{

                     "loginName":tdIns.html(),

                     "id":tdId

                     },

                 success:function(data){

                     alert(data);

                 },

                 error : function() {

                     alert("通讯有问题,请稍候刷新...");

                 }

             });

         }); 

     });

 });

如果您觉得文章不错可以多顶一顶 谢谢！

双击Table表格td变成text修改内容的更多相关文章

  1. JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中

    本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...

  2. table表格整体居中 和 table表格中各行各列内容居中

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

  3. element-ui的table表格控件表头与内容列不对齐问题

    原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...

  4. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

  5. td 内容自动换行 table表格td设置宽度后文字太多自动换行

    设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可   ...

  6. 关于table表格 td里内容较多换行的处理方法

    最近在用table的时候由于td内容较多默认换行了,很不美观.于是找到处理方法: 在声明table的时候添加一个样式: <table id="tbOffice" data-r ...

  7. 关于table表格td里内容是数字而且太长不换行的问题

    <p>table{table-layout:fixed}</p><p>table td{word-wrap:break-word}</p><p&g ...

  8. table表格实现点击修改 PHP同步数据库 排序

    最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...

  9. table表格 td设置固定宽度

    table宽度自适应,而且部分TD是固定宽度. 只需要将固定宽设死,留下一列不设置宽度,将table宽度设置为100%. table-layout:fixed 作用不是很清楚 <table wi ...

随机推荐

  1. commons-logging日志实现解耦

    一.需要解耦      日志是实际应用中的一个重要部分,日志系统也有许多开源的实现,如java.util.logging, logback, log4j系列等.      在使用日志系统时,如果与具体 ...

  2. Crane UVA - 1611 思路+构造

    题目:题目链接 思路:思路+构造,假设 i  在pos 位置,那么如果 (pos-i-1)*2+i+1 <= n,那么可以操作一次换过来,如果他们之间元素个数是偶数,那么交换 i - pos,如 ...

  3. [Poj1273]Drainage Ditches（网络流）

    Description 给图,求最大流 最大流模板题,这里用dinic Code #include <cstdio> #include <cstring> #include & ...

  4. [GDOI2016][树链剖分+主席树]疯狂动物城

    题面 Description Nick 是只在动物城以坑蒙拐骗为生的狐狸,儿时受到偏见的伤害,放弃了自己的理想.他被兔子 Judy 设下圈套,被迫与她合作查案,而卷入意想不到的阴谋,历尽艰险后成为搭档 ...

  5. poj 2533Longest Ordered Subsequence

    Longest Ordered Subsequence Description A numeric sequence of ai is ordered if a1 < a2 < - < ...

  6. install golang plugin in webstrom

    https://github.com/go-lang-plugin-org/go-lang-idea-plugin/wiki/Documentation

  7. Go语言之并发编程（二）

    通道(channel) 单纯地将函数并发执行是没有意义的.函数与函数间需要交换数据才能体现并发执行函数的意义.虽然可以使用共享内存进行数据交换,但是共享内存在不同的goroutine中容易发生竞态问题 ...

  8. jar包导入仓库中

    mvn install:install-file -Dfile=F:/kaptcha-2.3.jar -DgroupId=com.google.code.kaptcha -DartifactId=ka ...

  9. Autofac Mvc5 Nuget

    Autofac 3.5.2 Install-Package Autofac -Version 3.5.2 Autofac ASP.NET MVC 5 Integration 3.3.3 Install ...

  10. 移动弱网测试方案Network Emulator for Windows Toolkit

    移动app在测试时,有时需要考虑弱网的情形下,app的表现,那么怎么营造这样子的环境呢? 一.首先需要控制网络,有两种方式其一使用网络损伤仪进行,其二采用软件方式.硬件采购费用太贵,因此使用win平台 ...