PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 可编辑表格,固定抬头

可编辑表格,固定抬头

中天行者
中天行者 原创
2021年11月28日 14:28:58 432浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>练习</title>
  6. <style>
  7. *{
  8. margin: 0 auto;
  9. padding: 0;
  10. }
  11. tr {
  12. height: 20px;
  13. }
  14. table, th, tr, td {
  15. margin: 0;
  16. padding: 0;
  17. border: 1px solid grey;
  18. border-spacing: 0;
  19. }
  20. table {
  21. width: 800px;
  22. margin: auto;
  23. }
  24. .title-left {
  25. font-weight: bold;
  26. background-color: #d3e9f5;
  27. }
  28. .color_blue {
  29. background-color: #b4e2f6;
  30. }
  31. .twenty-five_per {
  32. width: 25%;
  33. }
  34. .color_white{
  35. background-color: white;
  36. }
  37. input {
  38. padding: 0;
  39. border: none;
  40. z-index: 10;
  41. min-height: 100%;
  42. width: 90%;
  43. outline: none;
  44. border-spacing: 0;
  45. }
  46. #sex>div{
  47. min-height: 100%;
  48. min-width: 100%;
  49. }
  50. #sex>div>input{
  51. width: 10px ;
  52. }
  53. #number{
  54. min-width: 200px;
  55. }
  56. #image{
  57. max-height: 161px;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <form action="">
  63. <table>
  64. <tr id ="title" style="border-top: none;border-left: none;border-right: none">
  65. <th id="title_2" colspan="5" class="title-left color_white" height="60px" style="font-size: 30px;">求&ensp;职&ensp;简&ensp;历&ensp;表</th>
  66. </tr>
  67. <tr>
  68. <td colspan="5" class="title-left">------基本资料------</td>
  69. </tr>
  70. <tr>
  71. <td>姓名:</td>
  72. <td id="name">马小姐</td>
  73. <td>性别:</td>
  74. <td id="sex"></td>
  75. <td rowspan="7" style="width:20%" id="image"></td>
  76. </tr>
  77. <tr>
  78. <td>学历:</td>
  79. <td id="xueli">中专</td>
  80. <td>身高:</td>
  81. <td id="height">160cm</td>
  82. </tr>
  83. <tr>
  84. <td>籍贯:</td>
  85. <td id="jiguan">广东</td>
  86. <td>出生年月:</td>
  87. <td id="birthday">1991-12-01</td>
  88. </tr>
  89. <tr>
  90. <td>毕业院校</td>
  91. <td style="width: 480px" colspan="3" id="school">汕头学院</td>
  92. </tr>
  93. <tr>
  94. <td>专业</td>
  95. <td style="width: 480px" colspan="3 " id="zhuanye">管理学=>会计</td>
  96. </tr>
  97. <tr>
  98. <td>工作经验:</td>
  99. <td id="jingyan"></td>
  100. <td>目前年薪:</td>
  101. <td id="nianxin">保密/年</td>
  102. </tr>
  103. <tr>
  104. <td>有效证件:</td>
  105. <td id="card">身份证</td>
  106. <td>证件号码:</td>
  107. <td id="number" > 123455612345123456</td>
  108. </tr>
  109. <tr>
  110. <th colspan="5" class="title-left color_blue"></th>
  111. </tr>
  112. <tr>
  113. <td colspan="5" class="title-left">------求职意向------</td>
  114. </tr>
  115. <tr class="color_blue">
  116. <td>求职意向</td>
  117. <td colspan="4" id="gangwei">出纳,会计文员</td>
  118. </tr>
  119. <tr>
  120. <td>求职地区</td>
  121. <td colspan="2" style="width:40%" id="area">罗湖</td>
  122. <td>工资待遇</td>
  123. <td id="gongzhi">面议</td>
  124. </tr>
  125. <tr>
  126. <td height="80px">自我评价</td>
  127. <td height="80px" colspan="4" id="comment">
  128. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  129. </td>
  130. </tr>
  131. <tr>
  132. <th colspan="5" class="title-left color_blue"></th>
  133. </tr>
  134. <tr>
  135. <td colspan="5" class="title-left">------教育培训------</td>
  136. </tr>
  137. <tr>
  138. <td class="twenty-five_per">起止时间</td>
  139. <td class="twenty-five_per">就读院校</td>
  140. <td class="twenty-five_per">主修专业</td>
  141. <td colspan="2" class="twenty-five_per">学历</td>
  142. </tr>
  143. <tr>
  144. <td class="twenty-five_per" id="date">2009.09~2012.07</td>
  145. <td class="twenty-five_per" id="school1">华科附属职业学院</td>
  146. <td class="twenty-five_per" id="zhuanye1">会计电算化</td>
  147. <td colspan="2" class="twenty-five_per" id="xueli1">中专</td>
  148. </tr>
  149. <tr>
  150. <th colspan="5" class="title-left color_blue"></th>
  151. </tr>
  152. <div>
  153. <tr>
  154. <td colspan="5" class="title-left">------工作经验(1)------</td>
  155. </tr>
  156. <tr>
  157. <td class="twenty-five_per">就职公司</td>
  158. <td class="twenty-five_per" id="company">XXXX电器公司</td>
  159. <td class="twenty-five_per">公司行业</td>
  160. <td colspan="2" class="twenty-five_per" id="hangye">其它</td>
  161. </tr>
  162. <tr>
  163. <td class="twenty-five_per">就职时间</td>
  164. <td class="twenty-five_per" id="start_end">2011年12月至今</td>
  165. <td class="twenty-five_per">就职部门</td>
  166. <td colspan="2" class="twenty-five_per" id="bumen">财务部</td>
  167. </tr>
  168. <tr>
  169. <td class="twenty-five_per">公司性质</td>
  170. <td class="twenty-five_per" id="xingzhi">其它</td>
  171. <td class="twenty-five_per">就职职位</td>
  172. <td colspan="2" class="twenty-five_per " id="zhiwei">出纳</td>
  173. </tr>
  174. </div>
  175. <tr>
  176. <td height="80px">工作描述</td>
  177. <td height="80px" colspan="4" id="description">
  178. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  179. </td>
  180. </tr><tr>
  181. <td height="80px">工作描述</td>
  182. <td height="80px" colspan="4" id="description">
  183. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  184. </td>
  185. </tr><tr>
  186. <td height="80px">工作描述</td>
  187. <td height="80px" colspan="4" id="description">
  188. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  189. </td>
  190. </tr><tr>
  191. <td height="80px">工作描述</td>
  192. <td height="80px" colspan="4" id="description">
  193. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  194. </td>
  195. </tr><tr>
  196. <td height="80px">工作描述</td>
  197. <td height="80px" colspan="4" id="description">
  198. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  199. </td>
  200. </tr><tr>
  201. <td height="80px">工作描述</td>
  202. <td height="80px" colspan="4" id="description">
  203. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  204. </td>
  205. </tr><tr>
  206. <td height="80px">工作描述</td>
  207. <td height="80px" colspan="4" id="description">
  208. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  209. </td>
  210. </tr><tr>
  211. <td height="80px">工作描述</td>
  212. <td height="80px" colspan="4" id="description">
  213. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  214. </td>
  215. </tr><tr>
  216. <td height="80px">工作描述</td>
  217. <td height="80px" colspan="4" id="description">
  218. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  219. </td>
  220. </tr><tr>
  221. <td height="80px">工作描述</td>
  222. <td height="80px" colspan="4" id="description">
  223. 将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行将word-break属性设置为break-all,实现文字的自动换行
  224. </td>
  225. </tr>
  226. <tr>
  227. <th colspan="5" class="title-left color_blue"></th>
  228. </tr>
  229. <tr>
  230. <td colspan="5" class="title-left">------联系方式------</td>
  231. </tr>
  232. <tr>
  233. <td>联系电话</td>
  234. <td colspan="4" id="dianhua">123213123</td>
  235. </tr>
  236. <tr>
  237. <td>手机</td>
  238. <td colspan="4" id="phone">12345667777</td>
  239. </tr>
  240. <tr>
  241. <td>email</td>
  242. <td colspan="4" id="email">1112222@qq.com</td>
  243. </tr>
  244. </table>
  245. </form>
  246. <script>
  247. localStorage.clear()
  248. var objStorage = {
  249. 'name': '姓名',
  250. 'sex': '性别',
  251. 'image': '头像',
  252. 'xueli': '学历',
  253. 'height': '身高',
  254. 'birthday': '生日',
  255. 'jiguan': '籍贯',
  256. 'school': '毕业院校',
  257. 'zhuanye': '专业',
  258. 'jingyan': '工作经验',
  259. 'nianxin': '年薪',
  260. 'card': '证件类型',
  261. 'number': '证件号码',
  262. 'gangwei': '岗位',
  263. 'area': '求职地区',
  264. 'gongzhi': '期望薪资',
  265. 'comment': '自我评价',
  266. 'date': '学习日期',
  267. 'school1': '学校',
  268. 'zhuanye1': '专业',
  269. 'xueli1': '学历',
  270. 'company': '公司名称',
  271. 'hangye': '所属行业',
  272. 'start_end': '起止日期',
  273. 'bumen': '部门',
  274. 'xingzhi': '薪资',
  275. 'zhiwei': '职务',
  276. 'description': '工作描述',
  277. 'dianhua': '电话',
  278. 'phone': '手机',
  279. 'email': '邮箱'
  280. };
  281. var e ;
  282. Object.keys(objStorage).forEach(function (v, i) {
  283. //获取当前td元素
  284. var td = document.getElementById(v);
  285. td.style.cssText="color:#3e0909;font-size:15px;font-weight:normal"
  286. if(v==='image') td.style.cssText="min-width:120px"
  287. // var value = window.localStorage.getItem(v);
  288. //不判断td是否存在 会报错Cannot set properties of null (setting 'onclick')
  289. // 因为页面加载时会把事件绑定在元素上,如果加载时没有找到事件挂载的元素就会报这个错
  290. if(td){
  291. var value = localStorage.getItem(v);
  292. if(value){
  293. if(v==='image'){
  294. value="<img src='"+ value +"' width='100%' height='161px' >";
  295. }
  296. td.innerHTML= value;
  297. }
  298. td.onclick = function () {
  299. var inp = "input";
  300. var type = "text";
  301. if(v==="image"){
  302. type="file";
  303. }else if(v==="sex"){
  304. type = "radio"
  305. }else if(v==="email"){
  306. type = "email"
  307. }else if(v==="birthday"){
  308. type = "date"
  309. }
  310. e = inputHtml(inp,v,type);
  311. if (this.childNodes.length > 0) {
  312. this.childNodes[0].remove();
  313. }
  314. if(v==="sex"){
  315. e= inputHtml("div",'div','');
  316. e.append(inputHtml(inp,v,type,'男'))
  317. e.append("男");
  318. e.append(inputHtml(inp,v,type,'女'));
  319. e.append("女");
  320. e.append(inputHtml(inp,v,type,'保密'));
  321. e.append("保密");
  322. }
  323. e.onclick=function(event){
  324. event.stopPropagation();
  325. };
  326. var _this = this;
  327. _this.append(e);
  328. e.focus();
  329. if(v==="image"){
  330. e.onchange = function () {
  331. var imgs= document.createElement("img");
  332. imgs.src= window.URL.createObjectURL(e.files[0]);
  333. imgs.style.cssText="width:100%;max-height:161px"
  334. _this.replaceChild(imgs,e);
  335. localStorage.setItem(v,imgs.src);
  336. }
  337. }else if(v==="sex"){
  338. var sexValueE=document.getElementsByName("sex");
  339. for(var i = 0;i<sexValueE.length;i++){
  340. sexValueE[i].onclick=function(){
  341. _this.innerHTML=this.value;
  342. localStorage.setItem(v,this.value);
  343. }
  344. }
  345. }
  346. else{
  347. e.onclick=function(event){
  348. event.stopPropagation();
  349. };
  350. e.onchange = function () {
  351. if(e.value.length>0)td.innerHTML = e.value;
  352. window.localStorage.setItem(v, e.value)
  353. }
  354. }
  355. }
  356. }
  357. });
  358. //创建 元素
  359. function inputHtml(e,v,type,value='') {
  360. var element = document.createElement(e)
  361. if(type==="radio" && v==="sex"){
  362. element.value = value
  363. if (localStorage.getItem(v)===value) {
  364. element.checked=true;
  365. }
  366. }else{
  367. element.id = "id_" + v;
  368. }
  369. element.name = v;
  370. element.type = type;
  371. element.placeholder = '请填写' + objStorage[v];
  372. return element;
  373. }
  374. var title = document.getElementById("title");
  375. window.onscroll=function (e) {
  376. var top = document.documentElement.scrollTop ;
  377. if(top!==0){
  378. top -=1;
  379. }
  380. title.style.cssText="position:relative; width:800px;height:60px;margin:0 auto;top:"+ top +"px";
  381. }
  382. </script>
  383. </body>
  384. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议