JQuery 双击动态编辑

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 })
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>