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 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 ondblclick="ShowElement(this)">三人行团队</dd>
46 <dt>你的个性档</dt>
47 <dd ondblclick="ShowElement(this)">我闪故我在</dd>
48 </dl>
49 </body>
50 </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 ondblclick="ShowElement(this)">三人行团队</dd>
46 <dt>你的个性档</dt>
47 <dd ondblclick="ShowElement(this)">我闪故我在</dd>
48 </dl>
49 </body>
50 </html>
