search

博客列表 >可以进行数据录入的简历表

可以进行数据录入的简历表

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

相关文章

查看更多