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

 <!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. 2015-2016 Northwestern European Regional Contest (NWERC 2015)

    训练时间:2019-04-05 一场读错三个题,队友恨不得手刃了我这个坑B. A I J 简单,不写了. C - Cleaning Pipes (Gym - 101485C) 对于有公共点的管道建边, ...

  2. 数论：HDU1066-Last non-zero Digit in N!

    题目: Last non-zero Digit in N! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. POJ3436------ACM Computer Factory

    题目链接 ACM Computer Factory Description As you know, all the computers used for ACM contests must be i ...

  4. HDOJ 2120 Ice_cream's world I

    Ice_cream's world I ice_cream's world is a rich country, it has many fertile lands. Today, the queen ...

  5. laravel5.2总结--邮件

    laravel自带SwiftMailer库,集成了多种邮件API,支持多种邮件驱动方式,包括smtp.Mailgun.Maildrill.Amazon SES.mail和sendmail,Mailgu ...

  6. Android开发环境安装经验

    前段时间在一个安装论坛上，下载了老罗的Android学习视频，看到第三节就卡住了。我这边Eclipse安装SDK总是不成功，报各种错误。断断续续好几天的摸索，终于弄明白了。 首先要安装ADT插件，也就 ...

  7. c++ 中double与string之间的转换,char *

    运行代码为 /* * main.cpp * * Created on: Apr 7, 2016 * Author: lizhen */ #include <iostream> //#inc ...

  8. Mail.Ru Cup 2018 Round 2 Problem C Lucky Days

    设在第 $x$ 天二人都 lucky,则有 $\DeclareMathOperator{\lcm}{lcm}$ $ x = y_a t_a + R_a $ $ x= y_b t_ b + R_b$ 约 ...

  9. POJ 3648 Wedding（2-SAT的模型运用+DFS | Tarjan）

    Wedding Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10427   Accepted: 3170   Specia ...

  10. envsetup.sh 与 choosecombo

    choose: 来定义编译选项, choosecombo 将会一步一步提示你输入相应的编译参数 https://blog.csdn.net/kickxxx/article/details/692518 ...