首页 > 代码库 > JQuery 双击动态编辑

JQuery 双击动态编辑

2024-08-09 08:36:04   220人阅读

 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="http://www.mamicode.com/+$(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 })
22 
23 function ShowElement(element)
24 {
25     var oldhtml = element.innerHTML;
26     var newobj = document.createElement(‘input‘);//创建新的input元素
27     newobj.type = ‘text‘;//为新增元素添加类型
28     newobj.onblur = function(){
29         element.innerHTML = this.value ? this.value : oldhtml;//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 
30     }
31     element.innerHTML = ‘‘;
32     element.appendChild(newobj);
33     newobj.focus();
34 }
35 </script>    
36 </head>
37 
38 
39 <body>
40 <table border="1" width="200" id="table">  
41     <tr><td>111</td></tr>  
42     <tr><td>222</td></tr>  
43     <tr><td>333</td></tr>  
44     <tr><td>444</td></tr>  
45     <tr><td>555</td></tr>  
46 </table> 
47 <dl>
48   <dt>你的用户名:</dt>
49   <dd ondblclick="ShowElement(this)">三人行团队</dd>
50   <dt>你的个性档</dt>
51   <dd ondblclick="ShowElement(this)">我闪故我在</dd>
52 </dl>
53 </body>
54 </html>

JQuery 双击动态编辑


联系
我们