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

一个可编辑的表格 双击进行编辑,回车确认编辑内容,如果不回车确认.那么恢复原来的值

程序员文章站 2022-03-13 13:58:52
...

一个可编辑的表格
通过双击进行编辑,回车确认编辑内容,如果不回车确认.那么恢复原来的值

效果图如下

一个可编辑的表格 双击进行编辑,回车确认编辑内容,如果不回车确认.那么恢复原来的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. table{
  8. border: 1px solid #333;
  9. border-spacing:10px 20px;
  10. border-collapse:separate;
  11. font-size: 14px;
  12. }
  13. td,th{
  14. height: 30px;
  15. width: 100px;
  16. border-radius: 5p;
  17. border: 1px solid #333;
  18. border-collapse:separate;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <table>
  24. <caption>人员信息登记表</caption>
  25. <thead>
  26. <tr>
  27. <th>姓名</th>
  28. <th>年龄</th>
  29. <th>性别</th>
  30. <th>部门</th>
  31. <th>薪资</th>
  32. <th>工龄</th>
  33. </tr>
  34. </thead>
  35. <tbody>
  36. <tr>
  37. <td>张三</td>
  38. <td>22</td>
  39. <td></td>
  40. <td>技术部</td>
  41. <td>12K</td>
  42. <td>3年</td>
  43. </tr>
  44. <tr>
  45. <td>李四</td>
  46. <td>22</td>
  47. <td></td>
  48. <td>技术部</td>
  49. <td>12K</td>
  50. <td>5年</td>
  51. </tr>
  52. <tr>
  53. <td>张三</td>
  54. <td>22</td>
  55. <td></td>
  56. <td>技术部</td>
  57. <td>12K</td>
  58. <td>3年</td>
  59. </tr>
  60. <tr>
  61. <td>张三</td>
  62. <td>22</td>
  63. <td></td>
  64. <td>技术部</td>
  65. <td>12K</td>
  66. <td>3年</td>
  67. </tr>
  68. <tr>
  69. <td>张三</td>
  70. <td>22</td>
  71. <td></td>
  72. <td>技术部</td>
  73. <td>12K</td>
  74. <td>3年</td>
  75. </tr>
  76. <tr>
  77. <td>张三</td>
  78. <td>22</td>
  79. <td></td>
  80. <td>技术部</td>
  81. <td>12K</td>
  82. <td>3年</td>
  83. </tr>
  84. </tbody>
  85. <tfoot>
  86. <tr>
  87. <td colspan="6"></td>
  88. </tr>
  89. </tfoot>
  90. </table>
  91. <script>
  92. window.onload=function ()
  93. {
  94. var mytd =document.getElementsByTagName('td');
  95. var newTd =[];
  96. // console.log(mytd);
  97. for (let i=0;i<mytd.length;i++){
  98. newTd[i]=mytd[i].innerHTML;
  99. }
  100. for (var i=0;i<mytd.length;i++)
  101. {
  102. mytd[i].ondblclick = function ()
  103. {
  104. var inputNum = document.getElementsByTagName('input')
  105. // if (inputNum.length>0){
  106. // return false;
  107. // }
  108. for(let i=0; i<this.childNodes.length; i++){
  109. if(this.childNodes[i].nodeName=='INPUT'){
  110. return false;
  111. }
  112. }
  113. for (let j = 0; j<mytd.length;j++)
  114. {
  115. var inputN= mytd[j].getElementsByTagName('input')
  116. if (inputN.length>0)
  117. {
  118. var inpt=newTd[j];
  119. inputN.onkeyup=function ()
  120. {
  121. var event =e || window.event;
  122. if (event.key == 'Enter')
  123. {
  124. inpt = inputN[0].value;
  125. }else {
  126. inpt=newTd[j].innerHTML;
  127. }
  128. }
  129. mytd[j].removeChild(inputN[0]);
  130. // console.log(inpt);
  131. mytd[j].innerHTML =inpt;
  132. // console.log(newTd[j]);
  133. }
  134. }
  135. var tdText = this.innerHTML;
  136. this.innerHTML = '';
  137. // console.log(myinput.value);
  138. var myinput = document.createElement('input');
  139. myinput.setAttribute('type','text');
  140. myinput.style.cssText="border:0px;font-size:14px;width:95%;outline:none;";
  141. myinput.value =tdText;
  142. this.appendChild(myinput);
  143. myinput.focus();
  144. myinput.select();
  145. var tdo =this;
  146. myinput.onkeyup =function (e)
  147. {
  148. // console.log(e.code);
  149. var event =e || window.event;
  150. if (event.key == 'Enter')
  151. {
  152. tdo.innerHTML =this.value;
  153. tdText = this.value;
  154. }
  155. else if (event.key == 'Escape')
  156. {
  157. console.log(tdText);
  158. tdo.innerHTML = tdText;
  159. // inputText = tdText;
  160. }
  161. }
  162. myinput.ondblclick=function(e)
  163. {
  164. return false;
  165. }
  166. }
  167. }
  168. }
  169. </script>
  170. </body>
  171. </html>