1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3.     <title>表格的单元格编辑</title> 
    4.  
         
  4.     <style type="text/css"> 
    5.  
         
  5.      
    6.  
         
  6.     </style> 
    7.  
         
  7. </head> 
    8.  
         
  8. <body> 
    9.  
         
  9.     <table border="1" align="center" id="table" width="600"> 
    10.  
         
  10.         <tr> 
    11.  
         
  11.             <th>姓名</th> 
    12.  
         
  12.             <th>年龄</th> 
    13.  
         
  13.             <th>性别</th> 
    14.  
         
  14.             <th>联系方式</th> 
    15.  
         
  15.         </tr> 
    16.  
         
  16.         <tr> 
    17.  
         
  17.             <td>小赵</td> 
    18.  
         
  18.             <td>25</td>      
    19.  
         
  19.             <td>女</td>   
    20.  
         
  20.             <td>15339125250</td>     
    21.  
         
  21.         </tr> 
    22.  
         
  22.         <tr> 
    23.  
         
  23.             <td>小钱</td> 
    24.  
         
  24.             <td>50</td>      
    25.  
         
  25.             <td>男</td>   
    26.  
         
  26.             <td>15339125251</td>     
    27.  
         
  27.         </tr>    
    28.  
         
  28.         <tr> 
    29.  
         
  29.             <td>小孙</td> 
    30.  
         
  30.             <td>20</td>      
    31.  
         
  31.             <td>女</td>   
    32.  
         
  32.             <td>15339125252</td>     
    33.  
         
  33.         </tr> 
    34.  
         
  34.         <tr> 
    35.  
         
  35.             <td>小李</td> 
    36.  
         
  36.             <td>19</td>      
    37.  
         
  37.             <td>男</td>   
    38.  
         
  38.             <td>15339125253</td>     
    39.  
         
  39.         </tr> 
    40.  
         
  40.         <tr> 
    41.  
         
  41.             <td>小杨</td> 
    42.  
         
  42.             <td>25</td>      
    43.  
         
  43.             <td>女</td>   
    44.  
         
  44.             <td>15339125254</td>     
    45.  
         
  45.         </tr> 
    46.  
         
  46.         <tr> 
    47.  
         
  47.             <td>小宋</td> 
    48.  
         
  48.             <td>12</td>      
    49.  
         
  49.             <td>女</td>   
    50.  
         
  50.             <td>15339125256</td>     
    51.  
         
  51.         </tr> 
    52.  
         
  52.     </table> 
    53.  
         
  53.  
    54.  
         
  54.     <script type="text/javascript"> 
    55.  
         
  55.         //得到表格对象 
    56.  
         
  56.         var tb = document.getElementById("table"); 
    57.  
         
  57.         //遍历每一个单元格，添加事件 
    58.  
         
  58.         for (var i = 1; i < tb.rows.length; i++) { 
    59.  
         
  59.             var tr = tb.rows[i]; 
    60.  
         
  60.             for (var j = 0; j < tr.cells.length; j++) { 
    61.  
         
  61.                 var td = tr.cells[j]; 
    62.  
         
  62.                 td.onclick = beginEdit; 
    63.  
         
  63.             } 
    64.  
         
  64.         } 
    65.  
         
  65.  
    66.  
         
  66.         function beginEdit(e){ 
    67.  
         
  67.             //得到事件参数对象 
    68.  
         
  68.             ee = e || window.event; 
    69.  
         
  69.             //由参数对象得到事件源对象（其实就是单元格对象） 
    70.  
         
  70.             var target = e.target || e.srcElement; 
    71.  
         
  71.             //该层If语句用于取消冒泡 
    72.  
         
  72.             if (target.tagName == "TD") { 
    73.  
         
  73.                 var inputs = target.getElementsByTagName("input"); 
    74.  
         
  74.                 if (inputs == false || inputs.length == 0){  
    75.  
         
  75.                     //把单元格原来的值保存 
    76.  
         
  76.                     var text = target.innerHTML; 
    77.  
         
  77.                     //把单元格原来的值清空 
    78.  
         
  78.                     target.innerHTML = ""; 
    79.  
         
  79.                     //创建一个input元素 
    80.  
         
  80.                     var input = document.createElement("input"); 
    81.  
         
  81.                     //添加input到target的子元素 
    82.  
         
  82.                     target.appendChild(input); 
    83.  
         
  83.                     //设置input元素的类型 
    84.  
         
  84.                     input.type = "text"; 
    85.  
         
  85.                     input.size = "5"; 
    86.  
         
  86.                     input.focus(); 
    87.  
         
  87.                     //先把单元格原来的值添加到input元素中 
    88.  
         
  88.                     input.value = text; 
    89.  
         
  89.                      
    90.  
         
  90.                     //input元素失去焦点 
    91.  
         
  91.                     input.onblur = function(e){ 
    92.  
         
  92.                         ee = e || window.event; 
    93.  
         
  93.                         //事件源是input 
    94.  
         
  94.                         var target = e.target || e.srcElement; 
    95.  
         
  95.                         var td = target.parentNode; 
    96.  
         
  96.                         //innerHTML已经把input替换掉了，不需要再次一移除input 
    97.  
         
  97.                         td.innerHTML = target.value; 
    98.  
         
  98.                     } 
    99.  
         
  99.                 } 
    100.  
         
  100.             } 
    101.  
         
  101.         } 
    102.  
         
  102.  
    103.  
         
  103.  
    104.  
         
  104.     </script> 
    105.  
         
  105. </body> 
    106.  
         
  106. </html> 
    107.  
        
 
    
 该段代码实现了对单元格的编辑