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

 <!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. IP代理池之验证是否有效

    IP代理池之验证是否有效 把proxy pool项目跑起来,但也不知道这些ip怎么用,爬虫的时候是否用代理去爬取,下面通过一个例子来看看. 代码如下: import requests PROXY_PO ...

  2. requests.exceptions.SSLError……Max retries exceeded with url错误求助！！！

    import requests head = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Appl ...

  3. Codeforces Round #435 (Div. 2) B (二分图) C(构造)

    B. Mahmoud and Ehab and the bipartiteness time limit per test 2 seconds memory limit per test 256 me ...

  4. poj 2377 拉最长的线问题 kruskal算法

    题意:建光纤的时候,拉一条最长的线 思路:最大生成树 将图的n个顶点看成n个孤立的连通分支,并将所有的边按权从大到小排 边权递减的顺序,如果加入边的两个端点不在同一个根节点的话加入,并且要将其连通,否 ...

  5. Java程序占用实际内存大小

    很多人错误的认为运行Java程序时使用-Xmx和-Xms参数指定的就是程序将会占用的内存,但是这实际上只是Java堆对象将会占用的内存.堆只是影响Java程序占用内存数量的一个因素.要更好的理解你的J ...

  6. python中pip 出错

    错误:error in launcher: Unable to create process using '" python多个版本时出现, 解决方法-- 将pip重新安装 python3 ...

  7. 在Foxmail中添加阿里云企业邮箱账号

    1.安装完成Foxmail之后,新建账号 输入阿里云邮箱地址和密码,点击创建 接受服务器类型你可以选择POP3或者IMAP,在这里我选择的是POP3 点击创建,大功告成. 为什么要写这篇文章呢? 因为 ...

  8. 2 - JVM随笔分类（JVM堆的内存回收）

    JVM常用的回收算法是: 标记/清除算法 标记/复制算法 标记/整理算法 其中上诉三种算法都先具备,标记阶段,通过标记阶段,得到当前存活的对象,然后再将非标记的对象进行清除,而对象内存中对象的标记过程 ...

  9. nsfwjs鉴黄识别最小化案例

    3个月前,也就是2月份左右吧,Github上出现一个开源项目: Infinite Red, Inc.工作室宣布开源旗下基于tensorflow的tfjs的鉴黄小工具 据说是从15000张图片中 进行机 ...

  10. MongoDB快速入门学习笔记6 MongoDB的文档删除操作

    db.集合名称.remove({query}, justOne)query:过滤条件,可选justOne:是否只删除查询到的第一条数据,值为true或者1时,只删除一条数据,默认为false,可选. ...