可编辑表格，固定抬头 - 大前端学习

Community Learn Tools Library Leisure
English
Home > List of blog posts > 可编辑表格，固定抬头
Blogger Information
Blog 21
fans 0
comment 0
visits 12367
Special Recommendation
More>
Related recommendations
Related Tutorials
Popular Recommendations
Latest courses
The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1417702 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4258878 times of learning
Collection
JAVA Beginner's Video Tutorial

2485753 times of learning
Collection
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
可编辑表格，固定抬头
中天行者
Original
461 people have browsed it
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        tr {
            height: 20px;
        }
        table, th, tr, td {
            margin: 0;
            padding: 0;
            border: 1px solid grey;
            border-spacing: 0;
        }
        table {
            width: 800px;
            margin: auto;
        }
        .title-left {
            font-weight: bold;
            background-color: #d3e9f5;
        }
        .color_blue {
            background-color: #b4e2f6;
        }
        .twenty-five_per {
            width: 25%;
        }
        .color_white{
           background-color:  white;
        }
        input {
            padding: 0;
            border: none;
            z-index: 10;
            min-height: 100%;
            width: 90%;
            outline: none;
            border-spacing: 0;
        }
        #sex>div{
            min-height: 100%;
            min-width: 100%;
        }
        #sex>div>input{
            width: 10px ;
        }
        #number{
            min-width: 200px;
        }
        #image{
            max-height: 161px;
        }
    </style>
</head>
<body>
<form action="">
    <table>
        <tr id ="title" style="border-top: none;border-left: none;border-right: none">
            <th id="title_2" colspan="5" class="title-left color_white" height="60px" style="font-size: 30px;">求&ensp;职&ensp;简&ensp;历&ensp;表</th>
        </tr>
        <tr>
            <td colspan="5" class="title-left">------基本资料------</td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td id="name">马小姐</td>
            <td>性别：</td>
            <td id="sex">女</td>
            <td rowspan="7" style="width:20%" id="image"></td>
        </tr>
        <tr>
            <td>学历：</td>
            <td id="xueli">中专</td>
            <td>身高：</td>
            <td id="height">160cm</td>
        </tr>
        <tr>
            <td>籍贯：</td>
            <td id="jiguan">广东</td>
            <td>出生年月：</td>
            <td id="birthday">1991-12-01</td>
        </tr>
        <tr>
            <td>毕业院校</td>
            <td style="width: 480px" colspan="3" id="school">汕头学院</td>
        </tr>
        <tr>
            <td>专业</td>
            <td style="width: 480px" colspan="3 " id="zhuanye">管理学=>会计</td>
        </tr>
        <tr>
            <td>工作经验：</td>
            <td id="jingyan">无</td>
            <td>目前年薪：</td>
            <td id="nianxin">保密/年</td>
        </tr>
        <tr>
            <td>有效证件：</td>
            <td id="card">身份证</td>
            <td>证件号码：</td>
            <td id="number" > 123455612345123456</td>
        </tr>
        <tr>
            <th colspan="5" class="title-left color_blue"></th>
        </tr>
        <tr>
            <td colspan="5" class="title-left">------求职意向------</td>
        </tr>
        <tr class="color_blue">
            <td>求职意向</td>
            <td colspan="4" id="gangwei">出纳，会计文员</td>
        </tr>
        <tr>
            <td>求职地区</td>
            <td colspan="2" style="width:40%" id="area">罗湖</td>
            <td>工资待遇</td>
            <td id="gongzhi">面议</td>
        </tr>
        <tr>
            <td height="80px">自我评价</td>
            <td height="80px" colspan="4" id="comment">
                将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，实现文字的自动换行
            </td>
        </tr>
        <tr>
            <th colspan="5" class="title-left color_blue"></th>
        </tr>
        <tr>
            <td colspan="5" class="title-left">------教育培训------</td>
        </tr>
        <tr>
            <td class="twenty-five_per">起止时间</td>
            <td class="twenty-five_per">就读院校</td>
            <td class="twenty-five_per">主修专业</td>
            <td colspan="2" class="twenty-five_per">学历</td>
        </tr>
        <tr>
            <td class="twenty-five_per" id="date">2009.09~2012.07</td>
            <td class="twenty-five_per" id="school1">华科附属职业学院</td>
            <td class="twenty-five_per" id="zhuanye1">会计电算化</td>
            <td colspan="2" class="twenty-five_per" id="xueli1">中专</td>
        </tr>
        <tr>
            <th colspan="5" class="title-left color_blue"></th>
        </tr>
        <div>
            <tr>
                <td colspan="5" class="title-left">------工作经验（1）------</td>
            </tr>
            <tr>
                <td class="twenty-five_per">就职公司</td>
                <td class="twenty-five_per" id="company">XXXX电器公司</td>
                <td class="twenty-five_per">公司行业</td>
                <td colspan="2" class="twenty-five_per" id="hangye">其它</td>
            </tr>
            <tr>
                <td class="twenty-five_per">就职时间</td>
                <td class="twenty-five_per" id="start_end">2011年12月至今</td>
                <td class="twenty-five_per">就职部门</td>
                <td colspan="2" class="twenty-five_per" id="bumen">财务部</td>
            </tr>
            <tr>
                <td class="twenty-five_per">公司性质</td>
                <td class="twenty-five_per" id="xingzhi">其它</td>
                <td class="twenty-five_per">就职职位</td>
                <td colspan="2" class="twenty-five_per " id="zhiwei">出纳</td>
            </tr>
        </div>
        <tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr><tr>
            <td height="80px">工作描述</td>
            <td height="80px" colspan="4" id="description">
                将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，实现文字的自动换行
            </td>
        </tr>
        <tr>
            <th colspan="5" class="title-left color_blue"></th>
        </tr>
        <tr>
            <td colspan="5" class="title-left">------联系方式------</td>
        </tr>
        <tr>
            <td>联系电话</td>
            <td colspan="4" id="dianhua">123213123</td>
        </tr>
        <tr>
            <td>手机</td>
            <td colspan="4" id="phone">12345667777</td>
        </tr>
        <tr>
            <td>email</td>
            <td colspan="4" id="email">1112222@qq.com</td>
        </tr>
    </table>
</form>
<script>
localStorage.clear()
    var objStorage = {
        'name': '姓名',
        'sex': '性别',
        'image': '头像',
        'xueli': '学历',
        'height': '身高',
        'birthday': '生日',
        'jiguan': '籍贯',
        'school': '毕业院校',
        'zhuanye': '专业',
        'jingyan': '工作经验',
        'nianxin': '年薪',
        'card': '证件类型',
        'number': '证件号码',
        'gangwei': '岗位',
        'area': '求职地区',
        'gongzhi': '期望薪资',
        'comment': '自我评价',
        'date': '学习日期',
        'school1': '学校',
        'zhuanye1': '专业',
        'xueli1': '学历',
        'company': '公司名称',
        'hangye': '所属行业',
        'start_end': '起止日期',
        'bumen': '部门',
        'xingzhi': '薪资',
        'zhiwei': '职务',
        'description': '工作描述',
        'dianhua': '电话',
        'phone': '手机',
        'email': '邮箱'
    };
    var e ;
    Object.keys(objStorage).forEach(function (v, i) {
        //获取当前td元素
        var td = document.getElementById(v);
        td.style.cssText="color:#3e0909;font-size:15px;font-weight:normal"
        if(v==='image') td.style.cssText="min-width:120px"
        // var value = window.localStorage.getItem(v);
        //不判断td是否存在 会报错Cannot set properties of null (setting 'onclick')
        // 因为页面加载时会把事件绑定在元素上，如果加载时没有找到事件挂载的元素就会报这个错
        if(td){
            var value = localStorage.getItem(v);
            if(value){
                if(v==='image'){
                    value="<img src='"+ value +"' width='100%' height='161px' >";
                }
                td.innerHTML= value;
            }
            td.onclick = function () {
                var inp = "input";
                var type = "text";
                if(v==="image"){
                    type="file";
                }else if(v==="sex"){
                    type = "radio"
                }else if(v==="email"){
                    type = "email"
                }else if(v==="birthday"){
                    type = "date"
                }
                e = inputHtml(inp,v,type);
                if (this.childNodes.length > 0) {
                    this.childNodes[0].remove();
                }
                if(v==="sex"){
                    e= inputHtml("div",'div','');
                    e.append(inputHtml(inp,v,type,'男'))
                    e.append("男");
                    e.append(inputHtml(inp,v,type,'女'));
                    e.append("女");
                    e.append(inputHtml(inp,v,type,'保密'));
                    e.append("保密");
                }
                e.onclick=function(event){
                    event.stopPropagation();
                };
                var _this = this;
                _this.append(e);
                e.focus();
                if(v==="image"){
                    e.onchange = function () {
                        var imgs= document.createElement("img");
                        imgs.src=  window.URL.createObjectURL(e.files[0]);
                        imgs.style.cssText="width:100%;max-height:161px"
                        _this.replaceChild(imgs,e);
                        localStorage.setItem(v,imgs.src);
                    }
                }else if(v==="sex"){
                    var sexValueE=document.getElementsByName("sex");
                    for(var i = 0;i<sexValueE.length;i++){
                        sexValueE[i].onclick=function(){
                            _this.innerHTML=this.value;
                            localStorage.setItem(v,this.value);
                        }
                    }
                }
                else{
                    e.onclick=function(event){
                        event.stopPropagation();
                    };
                    e.onchange = function () {
                        if(e.value.length>0)td.innerHTML = e.value;
                        window.localStorage.setItem(v, e.value)
                    }
                }
            }
        }
    });
    //创建 元素
    function inputHtml(e,v,type,value='') {
        var element = document.createElement(e)
        if(type==="radio" && v==="sex"){
            element.value = value
            if (localStorage.getItem(v)===value) {
                element.checked=true;
            }
        }else{
            element.id = "id_" + v;
        }
        element.name = v;
        element.type = type;
        element.placeholder = '请填写' + objStorage[v];
        return element;
    }
    var title = document.getElementById("title");
window.onscroll=function (e) {
    var top =  document.documentElement.scrollTop   ;
    if(top!==0){
        top -=1;
    }
    title.style.cssText="position:relative; width:800px;height:60px;margin:0 auto;top:"+ top +"px";
    }
</script>
</body>
</html>
Correcting teacher：
PHPz

Correction status：qualified

Teacher's comments：很好的实践，如果是简历实例的话很好，但是如果只是单纯的修改的话则略显麻烦需要重新输入，可以获取之前的表格中储存的文本那样的话就更好了
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
鼠标悬停伪类的理解

2021-11-14 01:30:35