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

 该段代码实现了对单元格的编辑