前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >滚动条下拉时 table 的thead 固定在网页固定在顶部不动

滚动条下拉时 table 的thead 固定在网页固定在顶部不动

作者头像
week
发布2018-08-24 18:03:43
2.7K0
发布2018-08-24 18:03:43
举报
文章被收录于专栏:用户画像

一、效果图

二、前端页面

核心代码:

1、固定顶部

代码语言:javascript
复制
position:fixed;top:0px

2、左右滚动条

代码语言:javascript
复制
OVERFLOW-X: scroll;width:720px;

3、时间内容越出单元格显示

代码语言:javascript
复制
position: relative;bottom:30px;
代码语言:javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<html>
<head>
    <title>场地预定</title>
</head>
<style type="text/css">
    .table-chang{margin-left: 0px;overflow: hidden;float: left;border-collapse: separate;border-spacing:5px}
    .table-chang th{width: 120px;min-width:120px;max-width:120px;height: 60px;font-weight: normal;text-align: center;color: #323232}
    .table-chang td{width: 120px;min-width:120px;max-width:120px;height: 60px;background: #FFF;text-align: center;color: #fff;font-size: 20px;padding:0px;border: 1px solid  #FFFFFF;}
    .table-chang td a{display: block;width: 100%;height: 100%;}
    .table-chang td.access{background: #FFF;color:#A62A04;border: 1px dashed #A62A04;}
    .table-chang td.unavailable{background: #F0F0F0;color:#C8C8C8}
    .table-chang td.unPayed{background: #F0860C;}
    .table-chang td div.unPayed{background: #F0860C;}
    .table-chang thead th{font-size: 22px;border:1px;background:transparent}
    .table-chang thead tr td .time_cell{width:30px;height:30px;text-align: center;color: #323232}
    .table-chang tbody tr td .time_cell {width:30px;height:30px;font-size:20px;color:#000;border:0px;background: transparent;}
    .table-chang tbody tr td .time_cell span{font-size:22px;float: right;}
</style>
<body>
<div id="reserveStatus" style="OVERFLOW-X: scroll;width:720px;" align=center>
    <table class="table-chang">
        <thead id="fieldThead"  style="position:fixed;top:0px;margin-left:-5px;background-color: #ffffff">
        <%--场地--%>
        <tr>
            <th></th>
            <c:forEach items="${venueFieldPriceList}" var="field" varStatus="status">
                <th>${field.fieldName}</th>
            </c:forEach>
        </tr>
        <%--场地--%>
        </thead>

        <tbody>
        <div style="margin-top:60px;">
            <%-- 遍历所有场地开始--%>
            <c:forEach items="${times}" var="t">
                <tr>
                        <%-- 纵坐标:时间--%>
                    <td style="width: 30px;position: relative;bottom:30px;">
                        <span class="time_cell">
                                ${fn:substring(t, 0, 5)}
                        </span>
                    </td>

                        <%-- 横坐标:场地状态--%>
                    <c:forEach items="${venueFieldPriceList}" var="field" varStatus="status">
                        <c:set var="status" value="0"/>
                        <%--遍历单个场地的时间、价格组成的Jason 获得状态--%>
                        <c:forEach items="${field.timePriceList}" var="tp">
                            <%--场地jason的时间与横坐标的时间一致 --%>
                            <j:if test="${t eq tp.time}">
                                <%--设置单个场地 时间T 的状态--%>
                                <c:set var="status" value="${tp.status}"/>
                                <c:set var="price" value="${tp.price}"/>
                                <%-- A场地 B时间 的状态 结束--%>
                            </j:if>
                        </c:forEach>


                        <%--设置td的class--%>
                        <j:if test="${'0' eq status}">
                            <c:set var="tdClass" value="reserveTd access"/>
                        </j:if>
                        <j:if test="${!('0' eq status)}">
                            <c:set var="tdClass" value="reserveTd unavailable"/>
                        </j:if>
                        <%--设置td的class end--%>

                        <%-- 场地 B时间 的状态展示--%>

                        <td status="${status}"
                            class="${tdClass}"
                            data-price="${price}"
                            data-field-id="${field.fieldId}"
                            data-field-name="${field.fieldName}"
                            data-time="${t}"
                        >
                            <j:if test="${'0' eq status}">
                                ¥ ${price}
                            </j:if>
                            <j:if test="${!('0' eq status)}">
                                <span>已预订</span>
                            </j:if>

                        </td>
                        <%-- A场地 B时间 的状态展示 结束--%>
                    </c:forEach>
                        <%-- 横坐标:时间 结束--%>
                </tr>
                <%-- 纵坐标:场地 结束--%>
            </c:forEach>
        </div>
        <%-- 遍历所有全场 场地结束--%>
        </tbody>

    </table>
</div>
<div class="row" style="display: none">
    <div id="unPayed" class="row">
    </div>
    <form id="orderForm">
        <input name="consDate" value="${consDate}" type="hidden">
        <input name="reserveVenueId" value="${venueId}" type="hidden">
        <%--<span id="reserve_submit"><a class="btn btn-success col-sm-10" style="height: 80px;width:100%;font-size: 50px;line-height: 80px;" onclick="filedSelectJson()">提交</a></span>--%>
    </form>
</div>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
<script>
    document.write("<script type='text/javascript' src='${ctxStatic}/modules/reserve/js/reserve_app_field.js?t=" + Math.random() + "'><\/script>");
</script>
</body>
</html>

三、当页面左右滑动时,thead也做出相应的移动

代码语言:javascript
复制
$(document).ready(function () {
    $("#reserveStatus").scroll(function () {
        var scrollLeft=$("#reserveStatus").scrollLeft();
        var margin_left=Number(-5)-Number(scrollLeft);
        $("#fieldThead").css({"margin-left":margin_left});
    });
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016年06月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档