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