javascripの表に対する操作(二)

17025 ワード
JavaScript 

  
  
  
  
    
   
   
   
   
  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.
 このセグメントコードは、セルの編集を実現します.
この記事は「聚沙成塔」のブログからのものです.転載はお断りします.
Text Strigs and String Object