JQuery 双击动态编辑

客官°小女子只卖身不卖艺 2021-12-21 12:37 261阅读 0赞

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