Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 可以进行数据录入的简历表
Blogger Information
Blog 21
fans 0
comment 0
visits 12421
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
可以进行数据录入的简历表
中天行者
Original
742 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post