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

 <!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. stm32之PWM博客好文收藏

    https://www.cnblogs.com/jiwangbujiu/p/5616376.html STM32F103 使用TIM3产生四路PWM https://www.cnblogs.com/c ...

  2. day18 js 正则，UI框架，Django helloworld 以及完整工作流程

    JS正则:    text     判断字符串是否符合规定的正则表达式    exec    获取匹配的数据   默认情况下: 只要能匹配到就返回true 否则返回false 只匹配数字:   所以J ...

  3. Python框架之Django学习笔记（十五）

    表单 从Google的简朴的单个搜索框,到常见的Blog评论提交表单,再到复杂的自定义数据输入接口,HTML表单一直是交互性网站的支柱.本次内容将介绍如何用Django对用户通过表单提交的数据进行访问 ...

  4. leetcode 【 Majority Element 】python 实现

    题目: Given an array of size n, find the majority element. The majority element is the element that ap ...

  5. jquery的html、text、val的用法

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

  6. Spring 简单而强大的事务管理功能

    开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...

  7. icheck 动态设置选中，判断是否选择

    $(this).iCheck('check'); //启用禁用上级编号             $('#OnPar').on('ifUnchecked', function (event) {     ...

  8. VS2015 +.NETMVC5 +EF实践

    -- 当做笔记,以上图片按照顺序来的. 跟着 http://www.cnblogs.com/sanshi/ 一步步来的

  9. AngularJs 特性 之 双向数据绑定

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

  10. BZOJ-2618 [CQOI2006]凸多边形

    半平面交模版题.. #include <cstdlib> #include <cstdio> #include <cmath> #include <cstri ...