JQuery 双击动态编辑

最新推荐文章于 2023-03-30 11:33:13 发布

weixin_34162629

最新推荐文章于 2023-03-30 11:33:13 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yhdsir/p/4685279.html

版权

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="./js/jquery.js"></script>
5 <script>
6 $( function(){
7     $("#table").find("td").bind("dblclick", function(){
8          var input ="<input type='text' id='temp' value="+$(this).text()+" >";
9         $(this).text("");
10         $(this).append(input);
11         $("input#temp").focus();
12         $("input").blur( function(){
13              if($(this).val()==""){
14                 $(this).remove();
15             } else{
16                 $(this).closest("td").text($(this).val());
17             }
18         });
19     })
20 })
21 function ShowElement(element)
22 {
23      var oldhtml = element.innerHTML;
24      var newobj = document.createElement('input'); // 创建新的input元素
25     newobj.type = 'text'; // 为新增元素添加类型
26     newobj.onblur = function(){
27         element.innerHTML = this.value ? this.value : oldhtml; // 当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
28     }
29     element.innerHTML = '';
30     element.appendChild(newobj);
31     newobj.focus();
32 }
33 </script>
34 </head>
35 <body>
36 <table border="1" width="200" id="table">
37     <tr><td>111</td></tr>
38     <tr><td>222</td></tr>
39     <tr><td>333</td></tr>
40     <tr><td>444</td></tr>
41     <tr><td>555</td></tr>
42 </table>
43 < dl>
44   <dt>你的用户名:</dt>
45   <dd οndblclick="ShowElement(this)">三人行团队</dd>
46   <dt>你的个性档</dt>
47   <dd οndblclick="ShowElement(this)">我闪故我在</dd>
48 </ dl>
49 </body>
50 </html>

转载于:https://www.cnblogs.com/yhdsir/p/4685279.html