标签：
//先不多说这里上我的页面
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>双击td变成text文本框</title>
7 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
8
9 </head>
10 <body>
11 <div class="widget-content nopadding" id="Mydiv">
12 <table class="table table-bordered data-table table-hover">
13 <thead>
14 <tr>
15 <th>ID</th>
16 <th style="width: 200px;">Login Name</th>
17 <th style="width: 200px;">Pass Word</th>
18 <th style="width: 200px;">Email</th>
19 <th>Date</th>
20 </tr>
21 </thead>
22
23 <tbody class="tbody">
24 <tr>
25 <td id="id">1</td>
26 <td id="loginName">HYX15517551511</td>
27 <td id="password">123456</td>
28 <td id="Email">15517551511@126.com</td>
29 <td id="CDate">2014-01-01</td>
30 </tr>
31
32 <tr>
33 <td>2</td>
34 <td>JJKK</td>
35 <td>123456</td>
36 <td>JJKK@126.com</td>
37 <td>2014-02-02</td>
38 </tr>
39
40 <tr>
41 <td>3</td>
42 <td>GGMM</td>
43 <td>123456</td>
44 <td>GGMM@126.com</td>
45 <td>2014-03-03</td>
46 </tr>
47 </tbody>
48 </table>
49 </div>
50 </body>
51 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
52 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
53 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
54 <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
55 <!-- 自己定义的JS文件 -->
56 <script src="js/MyJS.js"></script>
57 </html>
//这里就是我的MyJS文件了
1 $(document).ready(function() { 2 // Stuff to do as soon as the DOM is ready; 3 4 /*var numId = $(".tbody td");*/ //获取每一行每一个td 5 6 //获取每一行第二个td 7 8 var numId=$(".tbody tr td:nth-child(2)").each(function(){ 9 }); 10 numId.dblclick(function(){ 11 var tdIns=$(this); 12 var tdpar=$(this).parents("tr"); 13 14 var tdId=$(this).attr("id"); 15 /*alert(tdId);*/ 16 tdpar.css("backgroundColor","yellow"); 17 18 if(tdIns.children("input").length>0){ 19 return false; 20 } 21 22 23 var text = $(this).html(); 24 var inputIns = $("<input type=‘text‘/>"); //需要插入的输入框代码 25 inputIns.width(tdIns.width);//设置input与td宽度一致 26 inputIns.height("36px"); 27 inputIns.val(tdIns.html());//将本来单元格td内容copy到插入的文本框input中 28 29 /*alert(tdId);*/ 30 tdIns.html(""); //删除原来单元格td内容 31 32 inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中 33 34 inputIns.click(function(){ 35 return false; 36 }); 37 38 //处理Enter和Esc事件 39 inputIns.blur(function(){ 40 var inputText = $(this).val(); 41 tdIns.html(inputText); 42 tdpar.css("background-color","white"); 43 // tdIns.html(text); 44 alert(tdId); 45 $.ajax({ 46 type:"post", 47 url:"AjaxList", 48 data:{ 49 "loginName":tdIns.html(), 50 "id":tdId 51 }, 52 success:function(data){ 53 alert(data); 54 }, 55 error : function() { 56 alert("通讯有问题,请稍候刷新..."); 57 } 58 }); 59 }); 60 61 }); 62 });
如果您觉得文章不错可以多顶一顶 谢谢！
标签：
原文地址：http://www.cnblogs.com/HYXJavaweb/p/4446411.html
