1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .wrap{
8 width: 400px;
9 border: 1px solid black;
10
11 }
12 </style>
13 </head>
14 <body>
15 <table id="tr2" class="wrap" border="1">
16 <tr>
17 <th>姓名</th>
18 <th>成绩</th>
19 <th>性别</th>
20 </tr>
21
22 <tr>
23 <td>张三</td>
24 <td>1</td>
25 <td>女</td>
26 </tr>
27 </table>
28 </body>
29 </html>
30 <script>
31 var t = document.getElementById("tr2");
32 t.onclick = function(e){
33 var ev = e||window.event;
34 var obj = ev.target||ev.srcElement;
35 // if(obj.nodeName == "TH"){
36 // return;
37 // }
38 // alert(obj); 表格元素
39 if(obj.nodeName == "TD"){
40 var txt = obj.innerHTML;
41 var input = document.createElement("input");
42 input.setAttribute("type","text");
43 input.setAttribute("style","width:100px;border:1px solid red");
44 obj.innerHTML="";
45 obj.appendChild(input);
46 input.focus();
47
48 input.onblur = input.onkeydown =input.onclick =function(e){
49 var ev = e||window.event;
50 if(ev.type=="blur"|| (ev.type=="click") ||(ev.type=="keydown" && ev.ctrlKey && ev.keyCode == "13")){
51 var i;
52
53 if(input.value.trim()==""){
54 i = txt;
55 }else{
56 i = input.value;
57 }
58 obj.innerHTML = i;
59 obj.removeChild(input);
60
61 }
62 }
63 }
64 }
65 </script>
