表格新增一行 表头固定

表格新增一行 表头固定

HTML 代码

 <!-- 表格 -->
    <div class="addLine-table">
        <table id="addTable" border="1" align="center">
            <thead>
                <tr>
                    <th class="text-center addLine-num addLine-padding">
                        <div class="addLine-num-item ">ID</div>
                    </th>
                    <th><div class="addLine-tr">物品名称</div></th>
                    <th><div class="addLine-tr">数量</div></th>
                    <th><div class="addLine-tr">规格</div></th>
                    <th><div class="addLine-tr">用途说明</div></th>
                    <th><div class="addLine-tr">主要技术参数</div></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="addLine-padding addLine-td addLine-noBorder">
                        <div class="addLine-num-item addLine-border">
                            <div class="addLine-id">1</div>
                            <div class="layui-row addLine-icon" style="display: none;">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                    <a href="#" data-method="offset" data-type="auto" class="addLine-up">
                                        <i class="layui-icon">&#xe6b2;</i>
                                    </a>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 addLine-del">
                                    <a href="##" onClick="del(this)"><i class="layui-icon">&#xe640;</i></a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td> <input class="layui-input" value="11" /></td>
                    <td> <input class="layui-input" value="22" /></td>
                    <td> <input class="layui-input" value="22" /></td>
                    <td> <input class="layui-input" value="22" /></td>
                    <td> <input class="layui-input" value="22" /></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 添加按钮 -->
    <button type="button" class="layui-btn layui-form-item" onClick="add()">
        <i class="layui-icon"></i> 添加
    </button>

css代码

#addTable {
    border: 1px solid #e6e6e6;
}
#addTable td {
    padding: 9px 15px;
    font-size: 14px;
}

.addLine-table{
    width: 600px;
    overflow-x: scroll;
    border-right: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}
.addLine-table .layui-input{
    width: 200px;
}
.addLine-table .layui-table th{
    background-color: #ffffff;
}
.addLine-title{
    margin: 10px;
    font-weight: 700;
}
.addLine-icon,.addLine-id{
    width: 60px;
    text-align: center;
}
.addLine-icon i{
    font-size: 22px;
}
.addLine-del{
    margin-left: 10px;
}
.addLine-num-item{
    border-right: 1px solid #e6e6e6;
    padding: 10px 14px;
    height: 35px;
    line-height: 35px;
    width: 55px;
}
.addLine-tr{
    width:231px;
}
.addLine-padding{
    padding: 0!important;
}
.addLine-td{
    position: absolute;
    background: #ffffff;
    z-index: 99;
}
.addLine-noBorder{
    border: none;
}
.addLine-border{
    border-bottom: 2px solid #e6e6e6;
}

js 代码

reloadIndex();
    scroll();
    addUp();
    // 改变序号
    function changeIndex() {
        var i = 1;
        $(".addLine-id").each(function () {
            $(this).html(i++);
        })
        return false;
    }
    // 添加一列
    function add() {
        $("#addTable").append(
            '<tbody><tr><td class="addLine-padding addLine-td addLine-noBorder"><div class="addLine-num-item addLine-border"><div class="addLine-id">1</div><div class="layui-row addLine-icon" style="display: none;"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><a href="#" data-method="offset" data-type="auto" class="addLine-up"><i class="layui-icon">&#xe6b2;</i></a></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4 addLine-del"><a href="##" onClick="del(this)"><i class="layui-icon">&#xe640;</i></a></div></div></div></td><td> <input class="layui-input" value="11" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td></tr></tbody>'
        );
        changeIndex();
        reloadIndex();
        addUp();
        return false;
    }
    // 删除该列
    function del(object) {
        object = $(object).parent().parent().parent().parent().parent();
        object.remove();
        changeIndex();
        reloadIndex();
    }
    // 图标的显示隐藏
    function reloadIndex() {
        $("#addTable tbody tr").hover(function () {
            $(this).find(".addLine-id").css('display', 'none');
            $(this).find(".addLine-icon").css('display', 'block');
            $(this).css("backgroundColor", "#f9f9f9")
        }, function () {
            $(this).find(".addLine-id").css('display', 'block');
            $(this).find(".addLine-icon").css('display', 'none');
            $(this).css("backgroundColor", "#ffffff")
        });
        return false;
    }
    // 表头固定
    function scroll() {
        $(".addLine-table").scroll(function () {
            var left = $(".addLine-table").scrollLeft();
            var trs = $(".addLine-table table thead tr, .addLine-table table tbody tr");
            trs.each(function (i) {
                $(this).children().eq(0).css({
                    "position": "relative",
                    "left": left,
                    "background-color": "white",
                    "z-index": 99
                });
            });
        });
    }