CSS+JQUERY实现课表显示

1、UL+LI实现表格部分 2、可通过翻页切换星期 3、AJAX实时获取课表数据 4、鼠标悬停在课表区域时显示工具栏，在课表数据显示在文本框中，可整体修改、复制粘贴 5、单击表格某单元格出现文本框可即时修改即时AJAX保存

css, table

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 497
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<body>
    <div class="kbtitle">课表标题</div>
    <div class="kb">
        <ul class="utr">
            <li class="lth">班级</li>
            <li class="lth">课程</li>
            <li class="lth">第1节</li>
            <li class="lth">第2节</li>
            <li class="lth">第3节</li>
            <li class="lth">第4节</li>
            <li class="lth">第5节</li>
            <li class="lth">第6节</li>
            <li class="lth">第7节</li>
        </ul>
        <ul class="utr">
            <li class="bj">班级号</li>
            <li class="km0">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="km">科目</li>
            <li class="js0">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="js">教师</li>
            <li class="dd0">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
            <li class="dd">地点</li>
        </ul>
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="上一天">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">周一</a>
            </li>
            <li><a href="#">周二</a>
            </li>
            <li><a href="#">周三</a>
            </li>
            <li><a href="#">周四</a>
            </li>
            <li><a href="#">周五</a>
            </li>
            <li>
                <a href="#" aria-label="下一天">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>

1、UL+LI实现表格部分 2、可通过翻页切换星期 3、AJAX实时获取课表数据 4、鼠标悬停在课表区域时显示工具栏，在课表数据显示在文本框中，可整体修改、复制粘贴 5、单击表格某单元格出现文本框可即时修改即时AJAX保存

css, table

编辑器支持Emmet

快捷键

1、UL+LI实现表格部分 2、可通过翻页切换星期 3、AJAX实时获取课表数据 4、鼠标悬停在课表区域时显示工具栏，在课表数据显示在文本框中，可整体修改、复制粘贴 5、单击表格某单元格出现文本框可即时修改即时AJAX保存

css, table

CSS3+JS 点击显示详情的格子

CSS3+JS 小网格翻转式图片显示效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：