老师帮忙看下，科室排班那内容为啥没显示出来啊

来源：5-12 项目作业

宝慕林3013065

2020-07-09 13:00:22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtr=device-widtr, initial-scale=1.0">
    <title>城市医院预约平台</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/ui.css">
    <script type='text/javascript' src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <!-- 顶部的电话之类的 -->
    <div id="top" class="top">
        <div class='wrap'>
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;&nbsp;&nbsp;
                <a href='#'>登录</a> &nbsp;
                <a href='#'>注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href='#'>帮助中心</a></p>
        </div>
    </div>

    <!-- 头部logo、搜索栏 -->
    <div class="header" id="header">
        <div class="wrap">
            <a class="logo" href="#"></a>
            <div class="search ui-search" id="search">
                <div class="ui-search-selected">医院</div>
                <div class="ul-search-selected-list">
                    <a href="#">科室</a>
                    <a href="#">疾病</a>
                    <a href="#">医院</a>
                </div>
                <input type="text" placeholder="请输入搜索内容" class="ui-search-input">
                <a href="#" class="ul-search-submit">&nbsp;</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav" id="nav">
        <div class='wrap'>
            <a href="#" class="link">首页</a>
            <a href="#" class="link">按医院挂号</a>
            <a href="#" class="link">按科室挂号</a>
            <a href="#" class="link">按疾病挂号</a>
            <a href="#" class="link">最新公告</a>
            <a href="#" class="link right">社会知名医院</a>
        </div>
    </div>

    <!-- banner图区域 -->
    <div class="banner" id="banner">
        <div class="wrap">
            <div class="banner-top">
                <p class="banner-top-left">北京协和医院&nbsp;&nbsp;<span class="orange">关注医院</span></p>
                <p class="banner-top-right"><span class="blue">等级:</span>三级甲等&nbsp;&nbsp;<span class="blue">区域:</span>东城区&nbsp;&nbsp;<span class="blue">分类:</span>中国医科院所属医院</p>
            </div>
            <div class="banner-bottom">
                <div class="banner-bottom-left"></div>
                <div class="banner-bottom-center">
                    <p class="banner-bottom-center-content">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</p>
                    <p class="banner-bottom-center-content">http://www.pumch.cn/</p>
                    <p class="banner-bottom-center-content">东院咨询台:010-69155564;西院咨询台:010-69158010;</p>
                    <p class="banner-bottom-center-content">东院：106,108,110,111,116,684,685到东单路口北;41,104快,814到东单路口南;1,52,728,802到东单路口西;20,25,37,39,到东单路口东;</br>103,104,420,803到新东安市场;地铁1、5号线到东单。西院:68到辟才胡同东口;更多乘车路线详见须知。</p>
                </div>
                <div class="banner-bottom-right"></div>
            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="main" id="main">
        <div class="wrap">
            <div class="main-nav">
                <a href="#0" class="main-nav-item main-nav-link">预约挂号</a>
                <a href="#0" class="main-nav-item">医院介绍</a>
                <a href="#0" class="main-nav-item">预约须知</a>
                <a href="#0" class="main-nav-item">停诊信息</a>
                <a href="#0" class="main-nav-item">查询取消</a>
            </div>
            <!-- 预约挂号 -->
            <div class="main-one main-wrap block">
                <div class="main-one-left" style="display: none;">
                    <p class="main-one-left-title">开放预约科室</p>
                    <p class="main-one-left-min-title">2301</p>
                    <div class="main-one-left-min-content">
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                    </div>
                    
                    <p class="main-one-left-min-title">专科</p>
                    <div class="main-one-left-min-content">
                        <a href="#0" class="main-one-left-min-item">多发性硬化专科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">多发性硬化专科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">多发性硬化专科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">多发性硬化专科</a>
                    </div>
                    
                    <p class="main-one-left-min-title">内科</p>
                    <div class="main-one-left-min-content">
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                    </div>
                    
                    <p class="main-one-left-min-title">内科</p>
                    <div class="main-one-left-min-content">
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                        <a href="#0" class="main-one-left-min-item">特殊门诊科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">特需血液内科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">门诊麻醉科</a>
                        <a href="#0" class="main-one-left-min-item">肿瘤内科门诊</a>
                    </div>
                </div>
                <div class="main-one-left-week">
                    <p>科室排班表&nbsp;&nbsp;<span class="returns">返回科室列表</span></p>
                    <div class="main-one-left-weeks">
                        <p class="icon-left"></p>
                        <p>上午</p>
                        <p>下午</p>
                        <p>晚上</p>
                    </div>
                    <div class="main-one-center">
                        <div class="schedule_box_wrap" id="schedule_box_wrap">
                            <div class="schedule_box_item">
                                <div class="date">星期一</br>2020-07-06</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期二</br>2020-07-07</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期三</br>2020-07-08</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期四</br>2020-07-09</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期五</br>2020-07-10</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期六</br>2020-07-11</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                            <div class="schedule_box_item marg">
                                <div class="date">星期日</br>2020-07-12</div>
                                <div class="status"></div>
                                <div class="status">约满</div>
                                <div class="status"></div>
                            </div>
                        </div>
                    </div>
                    <div class="main-one-right-weeks">
                        <p class="icon-right"></p>
                        <p></p>
                        <p></p>
                        <p></p>
                    </div>
                </div>
                <div class="main-one-right">
                    <p class="main-one-right-title">预约规划<span>（更新时间每日8:30更新）</span></p>
                    <div class="main-one-right-content">
                        <p>预约时间:<span>&nbsp;7天</span></p>
                        <p>放号时间:<span>&nbsp;8:30</span></p>
                        <p>停挂时间:<span>&nbsp;下午14:00停止次日预约挂号</br>（周五14:00后停挂至下周一）</span></p>
                        <p>退号时间:<span>&nbsp;就诊前一工作日14:00前取消</span></p>
                        <p>特殊规则:<span>&nbsp;①  取号地点不同:西院区预约取号地点:西院区门诊一层大厅挂号窗口取号。东院区预约取号地点:东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</span></p>
                    </div>
                </div>
            </div>
            <!-- 医院介绍 -->
            <div class="main-two main-wrap block" style="display: none;">
                <p>北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生计生委指定的全国疑难重症诊治指导中心，也是最早承担高干保健和外宾医疗任务的医院之一，以学科齐全、技术力量雄厚、特色专科突出、多学科综合优势强大享誉海内外。在2010、2011、2012、2013、2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年名列榜首。</p>
                <p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。90余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三基”、“三严”的现代医学教育理念，形成了以“教授、病案、图书馆”著称的协和“三宝”，培养造就了张晓、林巧稚等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大量的医学管理人才，创建了当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性的提出了“待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感”新办院理念。</p>
                <p>目前，医院共有2个院区、总建筑面积53万平方米，在职职工4000余名、两院院士5人、临床和医学科室53个、国家级重点学科20个、国家临床重点专科29个、博士点16个、硕士点29个、国家级继续医学教育基地6个、二级学科住院医师培养基地18个、三级学科专科医学培养基地15个。住院开放床位2000余张，单日最高门诊量约1.5万人次、年出院病人约8万余人次。被评为“全国文明单位”、“全国创先争优先进基层党组织”、“全国卫生系统先进集体”、“首都卫生系统文明单位”、“最受欢迎三甲医院”，荣获全国五一劳动奖章。同时，医院还承担着支援老少边穷地区、国家重要活动和突发事件主力医疗队的重任，在2008年北京奥运工作中荣获“特别贡献奖”。</p>
                <p>90多年来，协和人以执着的医志、高尚的医德、精湛的医术和严谨的学风书写了辉煌的历史，今天的协和人正为打造“国际知名、国内一流”医院的目标而继续努力。</p>
            </div>
            <!-- 预约须知 -->
            <div class="main-three main-wrap block" style="display: none;">
                <h3>北京协和医院预约挂号须知</h3>
                <h5>电话预约挂号：010-114（24小时）</h5>
                <div class="main-trree-guahao">
                    <h5>网格预约挂号：http://www.bjguahao.gov.cn</h5>
                    <p>根据卫生部8月5日通知和卫生局8月20日工作部署，北京协和医院已完成电话、网格预约挂号的流程建设，现将预约挂号、取号有关事项公布如下，请您认真阅读预约须知：</p>
                </div>
                <div>
                    <h5>一、预约时间范围：</h5>
                    <p>1、您可预约7天内（试点）日间的副教授、主治医师和住院医师等号源。节假日不安排预约号（含周六、日）。</br>
                       2、每天早上8:30分开始放号；下午14:00停止次日预约挂号。 </br>
                       3、周五14:00停挂至下周一。
                    </p>
                </div>
                <div>
                    <h5>二、预约实名制</h5>
                    <p>统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件（身份证、军官证、护照）、性别、电话、手机号码、病案号或协和就诊卡条形码上的ID号等有效基本信息。</p>
                </div>
                <div>
                    <h5>三、预约取号</h5>
                    <p>1、预约成功后，请患者于就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息（核对与预约登记实名信息一致的本人有效证件和预约识别码）和取号，如验证不符则医院不能提供相应的诊疗服务。如果没有协和医院的就诊卡者，请先办好就诊卡后再取号。</br>
                       2、取号时间:上午就诊患者，就诊当日早9:00以前取号。下午就诊患者，就诊当日12:00-13:30之间取号。过时未取号者，预约作废。</br> 
                       3、取号地点:西院区预约号取号地点:西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点:东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。
                    </p>
                </div>
                <div>
                    <h5>四、医生停诊</h5>
                    <p>如遇特殊情况医生停诊，给您造成的不变敬请谅解。医生临时停诊，工作人员会用电话方式通知您，请配合更改就诊日期或更换其他医生，请您保持电话畅通。</p>
                </div>
                <div>
                    <h5>五、取消预约</h5>
                    <p>挂出的预约号如办理退号，至少在就诊前一工作日14:00前通过网站或者114电话凭预约识别码进行取消。</p>
                </div>
                <div>
                    <h5>六、爽约处理</h5>
                    <p>1、如预约成功后患者未能按时就诊且不办理取消预约挂号视为爽约</br>
                       2、一年内（自然年）无故爽约累计达到3次的爽约用户将自动进入系统爽约名单，此后3个月内将取消其预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。
                    </p>
                </div>
                <div>
                    <h5>七、其他注意事项</h5>
                    <p>1、协和西院、东院都可以预约</br>
                       2、国际医疗门诊部，卫干门诊不对外预约。
                    </p>
                </div>
                <h5>北京协和医院</h5>
            </div>
            <!-- 停诊信息 -->
            <div class="main-four block" style="display: none;">
                <h3>停诊信息</h3>
                <table>
                    <!-- 1 -->
                    <tr>
                        <td>日期</td>
                        <td>星期</td>
                        <td>时段</td>
                        <td>科室</td>
                        <td>特长</td>
                        <td>职称</td>
                        <td>挂号费</td>
                        <td>可挂号数</td>
                        <td>剩余号数</td>
                        <td>替换方式</td>
                    </tr>
                    <!-- 2 -->
                    <tr>
                        <td>2017-01-09</td>
                        <td>1</td>
                        <td>上午</td>
                        <td>呼吸内科门诊</td>
                        <td></td>
                        <td>主治医师</td>
                        <td>5.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 3 -->
                    <tr>
                        <td>2017-01-13</td>
                        <td>5</td>
                        <td>上午</td>
                        <td>眼科门诊</td>
                        <td></td>
                        <td>主治医师</td>
                        <td>5.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 4 -->
                    <tr>
                        <td>2017-01-10</td>
                        <td>2</td>
                        <td>上午</td>
                        <td>变态反应科门诊</td>
                        <td></td>
                        <td>正教授</td>
                        <td>9.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 5 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>骨科门诊</td>
                        <td></td>
                        <td>主治医师</td>
                        <td>5.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 6 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>下午</td>
                        <td>特需眼科门诊</td>
                        <td></td>
                        <td>专家（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 7 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>上午</td>
                        <td>特需中医科门诊2</td>
                        <td></td>
                        <td>副教授（特需200）</td>
                        <td>200.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 8 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>中医科门诊</td>
                        <td></td>
                        <td>副教授</td>
                        <td>7.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 9 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>下午</td>
                        <td>特需血管外科门诊（西院）</td>
                        <td></td>
                        <td>专家（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 10 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>上午</td>
                        <td>泌尿外科膀胱癌专科门诊</td>
                        <td></td>
                        <td>副教授</td>
                        <td>7.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 11 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>下午</td>
                        <td>特需血液内科门诊</td>
                        <td></td>
                        <td>正教授（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 12 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>下午</td>
                        <td>特需耳鼻喉科门诊</td>
                        <td></td>
                        <td>专家（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 13 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>特需中医科门诊1</td>
                        <td></td>
                        <td>专家（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 14 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>上午</td>
                        <td>特需神经科门诊2</td>
                        <td></td>
                        <td>副教授（特需200）</td>
                        <td>200.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 15 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>特需耳鼻喉科门诊</td>
                        <td></td>
                        <td>专家（特需300）</td>
                        <td>300.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 16 -->
                    <tr>
                        <td>2017-01-09</td>
                        <td>1</td>
                        <td>上午</td>
                        <td>呼吸内科门诊</td>
                        <td></td>
                        <td>专家</td>
                        <td>14.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 17 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>上午</td>
                        <td>普通内科门诊</td>
                        <td></td>
                        <td>正教授（特需3副教授00）</td>
                        <td>7.00</td>
                        <td>5</td>
                        <td>5</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 18 -->
                    <tr>
                        <td>2017-01-12</td>
                        <td>4</td>
                        <td>下午</td>
                        <td>普通内科门诊</td>
                        <td></td>
                        <td>副教授</td>
                        <td>7.00</td>
                        <td>5</td>
                        <td>4</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 19 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>特需骨科门诊</td>
                        <td></td>
                        <td>副教授（特需200）</td>
                        <td>200.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 20 -->
                    <tr>
                        <td>2017-01-11</td>
                        <td>3</td>
                        <td>下午</td>
                        <td>整形美容外科门诊（西院）</td>
                        <td></td>
                        <td>主治医师</td>
                        <td>5.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                    <!-- 21 -->
                    <tr>
                        <td>2017-01-10</td>
                        <td>2</td>
                        <td>下午</td>
                        <td>变态反应科门诊</td>
                        <td></td>
                        <td>副教授</td>
                        <td>7.00</td>
                        <td>0</td>
                        <td>0</td>
                        <td>不可替换</td>
                    </tr>
                </table>
            </div>
            <!-- 查询取消 -->
            <div class="main-five block" style="display: none;">
                <div>
                    预约识别码:
                    <input type="text">
                    <button>查询订单</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页尾 -->
    <div id="footer" class="footer">
        Copyright © 2017慕课网版权所有
    </div>

    <!-- 回到顶部 -->
    <a href="#" class="go-top"></a>
    <script type='text/javascript' src="js/javascript.js"></script>
</body>
</html>

写回答

3回答

好帮手慕码

2020-07-09

已采纳

同学你好，问题如下：

1、for循环应该包含所有动态添加dom元素的代码：

2、没有调用动态生成dom元素的方法：

3、切换的时候，宽度会有一些问题：

建议修改下每一列的宽度：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

宝慕林3013065

提问者

2020-07-09

// 搜索栏的事件
$.fn.UiSearch = function(){
    var ui = $(this);
    // 点击下拉框，下面的元素显示
    $('.ui-search-selected',ui).on('click',function(){
        $('.ul-search-selected-list').show();
        return false;
    })
    // 点击下面的元素，下拉框的文本变成被点击的文本
    $('.ul-search-selected-list a',ui).on('click',function(){
        $('.ui-search-selected',ui).text($(this).text());
        $('.ul-search-selected-list').hide();
        return false;
    })
    // 点击别处的时候，下拉框隐藏
    $('body').on('click',function(){
        $('.ul-search-selected-list').hide();
    })
}

$.fn.UiTab = function(header,content){
    var ui = $(this);
    var tabs = $(header,ui);
    console.log(tabs);
    var cons = $(content,ui);
    var a = $('.main-nav > a');

    tabs.on('click',function(){
        var index = $(this).index();
        tabs.removeClass('main-nav-link').eq(index).addClass('main-nav-link');
        cons.hide().eq(index).show();
    })
}

// 点击返回预约科室
$.fn.returns = function(){
    var ui = $(this);
    ui.on('click',function(){
        $('.main-one-left').show();
        $('.main-one-left-week').hide();
    })
}

// 点击进入排班表
$.fn.open = function(){
    var ui = $(this);
    ui.on('click',function(){
        $('.main-one-left').hide();
        $('.main-one-left-week').show();
    })
}


// 排班表
$.fn.schedule = function(){
    var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    $('.schedule_box_wrap').empty();     // 输出今天之后的7个星期的排班
    
    var pageCount = 7;     //一共有7个星期的排班表，所以一共切换7次
    var days = pageCount * 7;  //一个星期是7天，所以所有的排期是7*7=49
    var date = new Date();  //获取到日期
    var time = date.getTime();  //返回的毫秒数

    for(var i=0;i<days;i++){
        var _t = time+i*86400*1000;
        var _d = new Date(_t);
        var html = [];
    }

    //上面获取到日期，这里就获取处理好的日期
    var w = week[_d.getDay()];  //星期
    var y = _d.getFullYear();  //年
    var m = _d.getMonth()+1;  //月

    //美化
    m = m < 10 ? '0' + m : m;
    var d = _d.getDate();
    d = d < 10 ? '0' + d : d;

    // 所以循环就是为了动态把排班的html结构加入到页面中，因为处理的是一天的，所以要循环多次把七个星期的全部添加进去
    // 把上面处理好的日期绑定在这里了
    html.push('<div class = "schedule_box_item"><div class="date">' + w + '</br>' + y + '-' + m + '-' + d + '</div>');
    html.push('<div class="status"></div>');
    html.push('<div class="status">约满</div>');
    html.push('<div class="status"></div></div>');

    // 把上面的结构添加到父元素上
    $('#schedule_box_wrap').append(html.join(''));
};

    // 按钮处理
    var currentPage = 0;// 记录切换到第几张排班，索引是0-6，默认第一张是0

    $('.icon-left').on('click',function(){
        // 点击上一张，索引值自减
        currentPage --;
        // 判断当前是不是第一张，如果是，就不减了
        if(currentPage < 0){
            currentPage = 0;
        }

        // left的位置负值，让盒子往左移动，因为上一张的索引一直是减少，所以left值也是一直减少，达到了往右滑动
        $('.schedule_box_wrap').animate({'left':-596*currentPage});
        return false;
    });

    $('.icon-right').on('click',function(){
        currentPage ++;
        if(currentPage > 6){
            currentPage = 6;
        }

        $('.schedule_box_wrap').animate({'left':-596*currentPage});
        return false;
    });

// 事件调用
$(function(){
    // 搜索栏事件
    $('.ui-search').UiSearch();
    $('.main').UiTab('.main-nav > .main-nav-item','.wrap > .block');
    $('.returns').returns();
    $('.main-one-left-min-item').open();
});

宝慕林3013065

提问者

2020-07-09

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
select,input{
    border: none;
    outline: none;
}
/* 公共样式 */
.wrap{
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* 顶部区 */
.top{
    background-color: #f5f5f5;
    color: #868686;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
}
/* 预约电话 */
.call{
    padding-left: 20px;
    background: url(../img/icon-call.png) left center no-repeat;
    float: left;
    cursor: pointer;
}
/* 登录注册 */
.welcome{
    float: right;
}
.welcome a{
    color: #5bb8eb;
}

/* logo区 */
.header{
    height: 92px;
}
/* 左侧logo */
.logo{
    display: inline-block;
    width: 403px;
    height: 74px;
    padding: 9px 0;
    background: url(../img/logo.png) left center no-repeat;
    background-size: contain;
}
/* 右侧搜索框 */
.search{
    background: url(../img/ui-search.jpg) center no-repeat;
    display: inline-block;
    width: 326px;
    height: 38px;
    position: absolute;
    right: 0;
    top: 32px;
}

/* 导航栏 */
.nav{
    height: 36px;
    background-color: #60bff2;
}
/* 导航栏里的每个元素 */
.nav .link{
    display: inline-block;
    padding: 0 20px;
    line-height: 36px;
    color: #fff;
    font-size: 16px;
    min-width: 80px;
    text-align: center;
}
/* 当鼠标移入导航栏里的每个元素时颜色发生一点变化 */
.nav a:hover{
    background-color: #87CEEB;
}
/* 社会知名医院 */
.nav .right{
    float: right;
}

.banner .wrap{
    background-color: #F7F7F7;
}
/* banner图上面的整体样式 */
.banner-top{
    height: 45px;
    margin-top: 40px;
    line-height: 30px;
    border-bottom: 1px solid rgb(209, 209, 209);
}
/* banner图左上的样式 */
.banner-top-left{
    font-size: 20px;
    color: #000;
    float: left;
}
/* banner图右上的样式 */
.banner-top-right{
    font-size: 14px;
    color: #000;
    float: right;
}
/* 橘色 */
.banner-top-left .orange{
    font-size: 14px;
    color: orange;
    cursor: pointer;
}
/* 蓝色 */
.banner-top-right .blue{
    color: blue;
}

/* banner图下的整体样式 */
.banner-bottom{
    margin-top: 15px;
    height: 250px;
}
/* banner图左下的图 */
.banner-bottom-left{
    width: 260px;
    height: 180px;
    background: url('../img/hospital-1.jpg') no-repeat;
    background-size: contain;
    float: left;
 }
/* banner图下的中间区域 */
.banner-bottom-center{
    font-size: 13px;
    width: 450px;
    display: inline-block;
    margin-left: 20px;
}
/* banner图下的中间区域的小图标 */
.banner-bottom-center-content:before{
    content: '';
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    left: -10px;
    top: 12px;
    background: url('../img/icon-web.png') top left no-repeat;
}
.banner-bottom-center-content:nth-child(2):before{
    background-position-y: -20px;
}
.banner-bottom-center-content:nth-child(3):before{
    background-position-y: -42px;
}
.banner-bottom-center-content:nth-child(4):before{
    background-position-y: -63px;
}
/* banner图下的中间区域的文字 */
.banner-bottom-center-content{
    padding: 8px 10px;
    line-height: 23px;
    color: #868686;
    position: relative;
}
/* banner图右下的图 */
.banner-bottom-right{
    width: 240px;
    height: 210px;
    background: url('../img/map-1.png') no-repeat;
    float: right;
}

/* 内容区域的导航栏下边框 */
.main-nav{
    border-bottom: 2px solid #60bff2;
}
/* 内容区域的导航栏每个元素 */
.main-nav-item{
    color: #60bff2;
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
}
.main-nav-item:hover{
    color: #0490e0;
}
/* 内容区域的导航栏里的第一个元素 */
.main-nav-link{
    background-color: #60bff2;
    color: #fff;
}

/* 内容区域的背景颜色 */
.main-wrap{
    background-color: #f6fafc;
}
.main-one{
    margin-top: 50px;
    height: 550px;
}
/* 第一个内容的左面 */
.main-one-left,
.main-one-left-week{
    float: left;
    width: 700px;
    overflow: hidden;
    position: relative;
}
.main-one-left-week  p span{
    font-size: 12px;
    color: #0490e0;
    cursor: pointer;
}
.main-one-left-week  p span:hover{
    color: #0368a3;
}
.main-one-left-weeks,
.main-one-right-weeks{
    float: left;
    width: 40px;
    height: 300px;
    font-size: 13px;
    text-align: center;
    border: 1px solid rgb(182, 180, 180);
    margin-top: 30px;
}
.main-one-right-weeks{
    float: right;
    margin-right: 20px;
}
.main-one-left-weeks p:nth-child(2),
.main-one-left-weeks p:nth-child(3),
.main-one-left-weeks p:nth-child(4),
.main-one-right-weeks p:nth-child(2),
.main-one-right-weeks p:nth-child(3),
.main-one-right-weeks p:nth-child(4){
    width: 40px;
    height: 85px;
    line-height: 85px;
    background-color: rgb(236, 243, 248);
}
.icon-left{
    background: url('../img/icon-scheduling-left.jpg') center no-repeat;
    width: 40px;
    height: 45px;
    cursor: pointer;
}
.icon-right{
    background: url('../img/icon-scheduling-right.jpg')  center no-repeat;
    width: 40px;
    height: 45px;
    cursor: pointer;
}
/* 排班表 */
.main-one-center{
    width: 596px;
    height: 302px;
    position: absolute;
    overflow: hidden;
    left: 42px;
    top: 51px;
}
.schedule_box_wrap{
    width: 99999px;
    height: 302px;
    position: absolute;    
}
.schedule_box_item{
    display: inline-block;
    width: 84.6px;
    height: 302px;
}
.marg{
    margin-left: -4px;
}
.date{
    width: 83.6px;
    height: 45px;
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 21px; 
    border: 1px solid rgb(182, 180, 180);
    border-left: none;
}
.status{
    width: 83.6px;
    height: 84px;
    line-height: 85px;
    text-align: center;
    font-size: 14px;
    border: 1px solid rgb(182, 180, 180);
    border-top: none;
    border-left: none;
}
.status:nth-child(3){
    background-color: #a9ddfc;
    color: #0490e0; 
}



/* 第一个内容的左面标题 */
.main-one-left-title{
    color: #666;
}
/* 第一个内容的左面小标题 */
.main-one-left-min-title{
    font-size: 14px;
    color: #868686;
    width: 100px;
    text-align: center;
    margin-top: 20px;
    display: inline-block;
}
/* 第一个内容的左面内容整体 */
.main-one-left-min-content{
    margin: -25px 0 10px 50px;
    font-size: 14px;
    font-weight: bold;
}
/* 第一个内容的左面每个元素 */
.main-one-left-min-item{
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    color: #000;
    text-align: left;
}
.main-one-left-min-item:hover{
    color: #0490e0;
}
.main-one-left-min-item:nth-child(1),
.main-one-left-min-item:nth-child(5),
.main-one-left-min-item:nth-child(9){
    margin-left: 50px;
}
/* 第一个内容的右面标题 */
.main-one-right{
    height: 250px;
    overflow-y:scroll;
}
.main-one-right-title{
    color: #666;
}
.main-one-right-title > span{
    color: #0490e0;
    font-size: 12px;
}
.main-one-right-content{
    margin-top: 20px;
    font-size: 14px;
    width: 280px;
    height: 300px;
}
.main-one-right-content p{
    padding-bottom: 10px;
    float: left;
}
.main-one-right-content p > span{
    display: inline-block;
    width: 200px;
    font-size: 13px;
    color: #666;
    text-align: left;
}
.main-one-right-content p:nth-child(3){
    padding-bottom: 30px;
}

/* 内容区域第二个 */
.main-two{
    margin-bottom: 30px;
}
.main-two p{
    font-size: 14px;
    color: #666;
    padding: 20px 0 0 0;
    line-height: 25px;
    text-indent: 28px;
}

/* 内容区域第三个 */
.main-three{
    margin-bottom: 30px;
}
.main-three > h3,
.main-three h5:last-child{
    text-align: center;
    margin: 20px 0;
}
.main-three div{
    margin: 20px 0;
}
.main-three div p{
    font-size: 13px;
    color: #333;
}

/* 内容区域第四个 */
.main-four > h3{
    text-align: center;
    margin: 20px 0;
}
.main-four > table{
    text-align: center;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 14px;
    color: #555;
    margin-bottom: 30px;
}
.main-four > table tr td{
    border: 1px solid #bebebe;
    height: 25px;
}
.main-four > table tr td:nth-child(1){
   width: 110px;
}
.main-four > table tr td:nth-child(2),
.main-four > table tr td:nth-child(3),
.main-four > table tr td:nth-child(5){
    width: 50px;
}
.main-four > table tr td:nth-child(4),
.main-four > table tr td:nth-child(6){
    width: 220px;
}
.main-four > table tr td:nth-child(7){
    width: 70px;
}
.main-four > table tr td:nth-child(8),
.main-four > table tr td:nth-child(9),
.main-four > table tr td:nth-child(10){
    width: 70px;
}

/* 内容区域第五个 */
.main-five{
    width: 100%;
    height: 200px;
    border-top: 1px solid #bebebe;
    border-bottom: 1px solid #bebebe;
    margin: 50px 0 30px 0;
}
.main-five div{
    text-align: center;
    line-height: 200px;
}
.main-five input{
    border: 1px solid rgb(192, 192, 192);
    height: 20px;
    color: #666;
}
.main-five button{
    background-color: #5bb8eb;
    border: none;
    height: 22px;
    color: #fff;
    width: 80px;
    outline: none;
    cursor: pointer;
}
.main-five button:hover{
    color: rgb(235, 235, 235);
}

/* 页尾 */
.footer{
    height: 70px;
    padding: 25px 0;
    background-color: #eceef2;
    line-height: 70px;
    text-align: center;
    font-size: 12px;
    color: #666;
}

/* 搜索栏 */
.ui-search{
    font-size: 14px;
    color: #fff;
}
/* 搜索栏的左侧名称 */
.ui-search-selected{
    width: 70px;
    height: 38px;
    line-height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 14px;
    cursor: pointer;
}
/* 搜索栏的左侧名称的下拉框 */
.ul-search-selected-list{
    position: absolute;
    width: 67px;
    line-height: 24px;
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    left: 2px;
    top: 38px;
    z-index: 2;
    display: none;
}
/* 搜索栏的左侧名称的下拉框每个元素 */
.ul-search-selected-list a{
    display: block;
    color: #A5a2a2;
    text-align: center;
}
.ul-search-selected-list a:hover{
    background-color: #ebeef5;
}
/* 搜索栏中间的输入框 */
.ui-search-input{
    width: 208px;
    height: 26px;
    line-height: 27px;
    position: absolute;
    top: 5px;
    left: 71px;
    padding-left: 5px;
    font-size: 13px;
    color: #A5a2a2;
}
/* 搜索栏右侧的按钮 */
.ul-search-submit{
    width: 40px;
    height: 38px;
    display: block;
    right: 0;
    position: absolute;
    top: 1px;
}

0 学习 · 14456 问题

查看课程

相似问题

老师帮我看看我的科室排班表的页面布局，感觉写的有问题但是找不出哪里的问题

回答 2

科室排班应该怎么做呢

回答 2

科室排班表跳转

回答 4

老师这部分的科室排班我是用table表格来做的，我不应该如何去做了，请给个思路

回答 1

老师，能否看下我的点击门诊跳转到科室排班表的结构和动态，感觉没有思路

回答 1

打开慕课网App查看更多内容