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

 <!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. Entrez Direct

    安装 cd ~/bin/bashperl -MNet::FTP -e \'$ftp = new Net::FTP("ftp.ncbi.nlm.nih.gov", Passive = ...

  2. django之配置静态文件

    # 别名 STATIC_URL = '/static/' # 配置静态文件,名字必须是STATICFILES_DIRS STATICFILES_DIRS = [ os.path.join(BASE_D ...

  3. Android拨打电话不弹出系统拨号界面总结

    我在网上搜了一下,解决这个问题,有两种方式: 1.反射调用系统底层方法,并获取系统权限 反射调用的代码如下: Class phoneFactoryClass = Class.forName(" ...

  4. VMware之无法切换桥接网络

    一.关闭正在运行的虚拟机 二.打开虚拟网络编辑器 三.还原默认设置 四.启动虚拟机即可正常使用桥接网络

  5. Redis实现之复制（一）

    复制 在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主服务器(master),而对主服务器 ...

  6. msconfig.exe

    msconfig.exe 编辑 本词条缺少概述.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!   中文名 微软系统配置实用程序 外文名 msconfig.exe 出品者 Micros ...

  7. 基于 <tx> 和 <aop> 命名空间的声明式事务管理

    环境配置 项目使用SSH架构,现在要添加Spring事务管理功能,针对当前环境,只需要添加Spring 2.0 AOP类库即可.添加方法: 点击项目右键->Build Path->Add ...

  8. （转）iOS-蓝牙学习资源博文收集

    ios蓝牙开发(一)蓝牙相关基础知识 ios蓝牙开发(二)蓝牙中心模式的ios代码实现 ios蓝牙开发(三)app作为外设被连接的实现 ios蓝牙开发(四)BabyBluetooth蓝牙库介绍 暂未完 ...

  9. 洛谷P1822 魔法指纹 【分块打表】

    题目 对于任意一个至少两位的正整数n,按如下方式定义magic(n):将n按十进制顺序写下来,依次对相邻两个数写下差的绝对值.这样,得到了一个新数,去掉前导0,则定义为magic(n).若n为一位数, ...

  10. 【VBA】Do While……Loop循环，遍历某列

    [说明] Do While……Loop循环,遍历某列 i = Do While Trim(T_sh.Cells(i, NOTESID_COL)) <> "" If T_ ...