18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

建站分享之循环表单与固定表头

2020-01-04 分享

jQuery调用版本:1.9.1

效果图

页面

<div class="type-panel-body tablebox">
    <table class="type-table" id="table">
        <thead>
            <tr>
                <td>序号</td>
                <td>数据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
        </thead>
        <tbody class="scrollTbody">
            <tr>
                <td>1</td>
                <td>数据fsdxfgdh项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>2</td>
                <td>esserr5tw据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>3</td>
                <td>erthdrsv据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>4</td>
                <td>rteu76据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>5</td>
                <td>vcdry据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>6</td>
                <td>vv据项一</td>
                <td>vvvvvvv据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>7</td>
                <td>数据eeeeeee项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>8</td>
                <td>数据项一</td>
                <td>rrrrrrrrr据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>9</td>
                <td>数据项一</td>
                <td>数据项二</td>
                <td>数据ffffffffff项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>10</td>
                <td>数据3333333项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>11</td>
                <td>222222222222222据项一</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
            <tr>
                <td>12</td>
                <td>11111111111111111</td>
                <td>数据项二</td>
                <td>数据项三</td>
                <td>数据项四</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.type-panel-head {
	line-height:114px;
	font-size:50px;
	padding-left:65px;
	color:#fff
}
.type-panel-body {
	height:calc(100% - 114px);
	overflow:hidden;
	border:1px solid #57646f;
	position:relative;
}
.fixedThead {
	position:absolute;
	width:100%;
	background:#0f1520;
	border-right:1px solid #57646f;
	z-index:100;
	border-bottom:1px solid #57646f
}
.type-panel-body table {
	width:100%;
	line-height:70px;
	color:#000;
	text-align:center;
}
.type-table thead,.fixedThead thead tr td {
	color:#fff;
	font-size:34px
}
.type-table tbody {
	font-size:30px;
	overflow:hidden
}
.type-table thead tr,.type-table tbody tr {
	border-bottom:1px solid #57646f
}
.type-table thead tr td,.type-table tbody tr  td {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.fixedThead thead tr td:first-child,.type-table thead tr td:first-child,.type-table tbody tr  td:first-child {
	border-right:1px solid #57646f;
	width:120px
}

JS

//table滚动
tableSliper("table");
//如果tbody超出容器才开始滚动
function tableSliper(tableId) {
    var _table = $("#" + tableId);
    var outHeight = _table.parent().height();
    var thisHeight = _table.height();
    if (outHeight < thisHeight) {
        //先复制一个thead
        var thead_html = "<div class='fixedThead'><table><thead>" + _table.find("thead").html() + "</thead></table></div>"
        _table.before(thead_html);
        //宽度与底层一致
        var this_add = _table.parent().find(".fixedThead").find("td");
        for (var i = 0; i < this_add.length; i++) {
            var th_w = _table.find("td").eq(i).width();
            if (i == 0) {
                th_w = th_w + 2;
            }
            this_add.eq(i).width(th_w);
        }
        var top = 0,
            timer, num = -_table.find("tbody").find("tr").height();
        timer = setInterval(function() {
            top = top - 1;
            if (top == num) {
                //第一项放到最后一项
                var td_fir = _table.find("tbody").find("tr:first-child");
                var td_new = "<tr>" + td_fir.html() +
                    "</tr>";
                _table.find("tbody").append(td_new);
                td_fir.remove();
                top = 0
            }
            _table.css('transform', 'translateY(' + top + 'px)');
        }, 25);
    }
}
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图