手机端课程表的实现——仿超级课程表

在开发项目时，有一个页面是我的课程表，想到超级课程表app，觉的它的那个我的课程表页面非常好，简单直观，把纸质的课程表在手机端展现出来了。
后来自己研究了一下，照着它的样式也写了一个，并且也能添加课程。
其实它的原理很简单，就是一张表格，我们需要把这张表格的样式写好，后面就是数据想对应了。

/*课程表*/
.course_table{ width: 100%;border-spacing: 0;}
.course_table th{ height: 2.5em; background: #f3f8f8;color: #6d8498; font-weight: 400;font-size: 0.95em;}
.course_table td{font-size:0.925em;height: 3em;border-bottom: 1px dashed #eee;text-align: center;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.course_table tr td:first-child {background: #f3f8f8;color: #698196;border-bottom: none;}

.add{background:#e1ebf2 center no-repeat;background-size: 100% 100%;height: 100%;color: #999999;line-height: 3em;width: 3em;margin:0 auto;
    font-size: 0.925em;display: none;}
.add span{font-size: 1.25em;color: #7993ab;}
.add.on{display: block;}
.course_all{padding-bottom: 0.5em;}
        .yuwen,.shuxue,.yingyu,.wuli,.huaxue,.shengwu,.lishi,.zhengzhi,.meishu,.tiyu,.dili,.yinyue,.dele{font-size:0.925em;background: #adbeff; color: #FFF;width: 3em;  height: 100%;padding: 3px 0;box-sizing: border-box; margin: 0 auto; border-radius: 0.5em; line-height: 2em; background-url:none;}
        .shuxue{background: #ff9e9f;}  .lishi{background: #ff9e9e;}
        .yingyu{background: #ffdf62;}  .zhengzhi{background: #61e7f0;}
        .wuli{background: #e4e275;}    .meishu{background: #fdc081;}
        .huaxue{background: #c2b4f6;}  .dili{background: #62e48a;}
        .shengwu{background: #ffc262;} .tiyu{background: #c2ec5c;}
        .dele{background: #FFF;    color: #666666;} .yinyue{background: #c2ec5c;}
        .course_all div{margin-right: 0.5em;}
        .course_all div:nth-child(7){margin-right: 0;}
        .add_kemu{padding: 0.5em;background: #ff9e9f;color: #FFF;border-radius: 0.25em;font-size: 0.85em;margin-left: 0.5em;}

.course_all{padding:0.75em 0.5em 0em 0.5em;}
.course_all div{width: 3em;height: 3em;text-align: center;display: inline-block;margin-bottom: 0.5em;}
<table class="course_table">
    <tbody id="course_html">
        <tr><th width="30">th><th>周一th><th>周二th><th>周三th><th>周四th><th>周五th><th>周六th>tr>
        <tr>
            <td>1td>
            <td id="1_1" onclick="add_course(1,1)" class="shuxue">数学td>
            <td id="2_1" onclick="add_course(2,1)"><div class="add on">+div>td>
            <td id="3_1" onclick="add_course(3,1)"><div class="add">+div>td>
            <td id="4_1" onclick="add_course(4,1)"><div class="add">+div>td>
            <td id="5_1" onclick="add_course(5,1)"><div class="add">+div>td>
            <td id="6_1" onclick="add_course(6,1)"><div class="add">+div>td>
        tr>
        <tr>
            <td>2td>
            <td id="1_2" onclick="add_course(1,2)"><div class="add">+div>td>
            <td id="2_2" onclick="add_course(2,2)"><div class="add">+div>td>
            <td id="3_2" onclick="add_course(3,2)"><div class="add">+div>td>
            <td id="4_2" onclick="add_course(4,2)"><div class="add">+div>td>
            <td id="5_2" onclick="add_course(5,2)"><div class="add">+div>td>
            <td id="6_2" onclick="add_course(6,2)"><div class="add">+div>td>
        tr>
    tbody>
table>


<div>
        <div class="weui-mask" id="iosMask" style="display: none">div>
        <div class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-picker__hd"> <a href="javascript:;" data-action="cancel" class="weui-picker__action" id="iosActionsheetCancel">取消a> <a href="javascript:;" data-action="select" class="weui-picker__action" id="weui-picker-confirm">确定a> div>
            <div class="course_all">
                <div class="yuwen" id="yuwen" onclick="choice(this.id)">语文div>
                <div class="shuxue" id="shuxue" onclick="choice(this.id)">数学div>
                <div class="yingyu" id="yingyu" onclick="choice(this.id)">英语div>
            div>
        div>
    div>  
<script type="text/javascript">
  // var data="";
    $(function(){
        $(".add").eq(0).addClass("on");
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');


        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        $(".add").on("click", function(){
            $(this).addClass("on");
        });

        //加号
        $(".course_table td").click(function(){
            $(".add").hide();
            if($(this).find(".add")){
                $(this).children(".add").show();
            }
        })


    })
var week='';
var num='';
//添加课程
function add_course(i,n){
    week=i; num=n;
    $('#iosActionsheet').addClass('weui-actionsheet_toggle');
    $('#iosMask').fadeIn(200);

}
//隐藏课程
function hideActionSheet() {
    $('#iosActionsheet').removeClass('weui-actionsheet_toggle');
    $('#iosMask').fadeOut(200);
}


//选择课程
 function choice(i){
    var subject=$("#"+i).html();
    var tdclass=$("#"+i).attr('class');
     var html=$("#"+i).clone().removeAttr('onclick');
     $("#"+week+"_"+num).html(html);
     hideActionSheet();
 }
script>

效果
每个单元格设置id，id=1_1就代表周一，第一节课
添加课程时，就把1,1作为参数传进去，还有科目，后台数据表也要相对应，表搭建好，日期，节数，科目，相应的设置好。、
获取课程表数据时，也一样的根据id循环出来。

好像没写明白，我的写作能力有点差。

---