欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

可编辑的表格

程序员文章站 2022-03-03 21:54:43
...

换了种方式,勉强算实现了

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         td input{
    8. 

  8.             font-size: 16px;
    9. 

  9.         }
    10. 

  10.     </style>
    11. 

  11. </head>
    12. 

  12. <body>
    13. 

  13. <table border="1">
    14. 

  14.     <tr>
    15. 

  15.         <th width="100">学科</th>
    16. 

  16.         <th width="400">说明</th>
    17. 

  17.     </tr>
    18. 

  18.     <tr>
    19. 

  19.         <td>Java</td>
    20. 

  20.         <td>何以解忧，唯有Java</td>
    21. 

  21.     </tr>
    22. 

  22.     <tr>
    23. 

  23.         <td>Python</td>
    24. 

  24.         <td>人生苦短，要学Python</td>
    25. 

  25.     </tr>
    26. 

  26.     <tr>
    27. 

  27.         <td>PHP</td>
    28. 

  28.         <td>PHP是世界上最好的编程语言</td>
    29. 

  29.     </tr>
    30. 

  30. </table>
    31. 

  31. <script>
    32. 

  32.     tdObj = document.getElementsByTagName('td');
    33. 

  33.     var content = '';
    34. 

  34.     for (let i in tdObj) {
    35. 

  35.         tdObj[i].onclick = function (e) {
    36. 

  36.             content = this.innerText;
    37. 

  37.             var inputObj = document.createElement('input');
    38. 

  38.             inputObj.name = 'temp'; //好像不加name也没什么问题
    39. 

  39.             inputObj.value = content;
    40. 

  40.             inputObj.style.width = '100%';
    41. 

  41.             inputObj.style.height = '100%';
    42. 

  42.             inputObj.style.border = 'none';
    43. 

  43.             inputObj.style.outline = 'none';
    44. 

  44.             this.innerHTML = '';
    45. 

  45.             this.append(inputObj);
    46. 

  46.             inputObj.focus();
    47. 

    48. 

  48.             inputObj.onclick = function (e) {
    49. 

  49.                 e.stopPropagation(); //防止input冒泡
    50. 

  50.             }
    51. 

  51.             inputObj.oninput = function (e) {
    52. 

  52.                 content = inputObj.value; //更新临时内容
    53. 

  53.             }
    54. 

  54.             inputObj.onblur = function (e) {
    55. 

  55.                 this.parentNode.innerHTML = content; //更改父节点内容
    56. 

  56.             }
    57. 

    58. 

  58.             inputObj.onkeydown = function (e) {
    59. 

  59.                 if (e.code === 'Enter') { //想用keyCode == 13 貌似不建议用了
    60. 

  60.                     this.parentNode.innerHTML = content;
    61. 

  61.                 }
    62. 

  62.             }
    63. 

  63.         }
    64. 

  64.     }
    65. 

    66. 

    67. 

  67. </script>
    68. 

  68. </body>
    69. 

  69. </html>
    70.

可编辑的表格

上一篇： 意派Epub360丨双12营销H5怎么制作？创意是制胜关键！

下一篇： 位置属性 + 动画 = 飞舞的气泡

推荐阅读