js-表格输入值替换 

 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>

 

posted @ 2015-09-13 19:34  -Amy-  阅读(424)  评论(0)    收藏  举报