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

微信公众号讲师中心
首页
文章
web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻
专题
后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端后端开发数据库移动端运维开发计算机基础
编程手册
大前端后端开发数据库移动端运维开发计算机基础
下载
js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
可编辑表格，固定抬头
中天行者
原创
693人浏览过
<!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>