JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<div id="kcb">
    
<h1>豆豆爱心课程表:)</h1>

    <table>
        <tr class="header">
            <td colspan="2">星期</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr class="am">
            <td rowspan="5">上午</td>
            <td>早</td>
            <td class="class9">初三9</td>
            <td></td>
            <td class="class7">初三7</td>
            <td></td>
            <td></td>
        </tr>
        <tr class="am">
            <td>1</td>
            <td class="class9">初三9</td>
            <td></td>
            <td class="class7">初三7</td>
            <td></td>
            <td></td>
        </tr>
        <tr class="am">
            <td>2</td>
            <td></td>
            <td class="class9">初三9</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="am">
            <td>3</td>
            <td class="class7">初三7</td>
            <td></td>
            <td></td>
            <td></td>
            <td class="class9">初三9</td>
        </tr>
        <tr class="am">
            <td>4</td>
            <td class="class7">初三7</td>
            <td></td>
            <td class="class9">初三9</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td class="class7">初三7</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>7</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="pm">
            <td rowspan="3">晚间</td>
            <td>8</td>
            <td></td>
            <td class="class7">初三7</td>
           ...

CSS

h1 {
    margin:5px;
    text-align:center;
}
table {
    width:100%;
    border-collapse:collapse;
}
td {
    border:1px solid #AAA;
    padding:10px;
    text-align:center;
}
.header {
    background-color:#CCC;
}
.am {
    background-color:#EEE;
}
.pm {
    background-color:#EEE;
}
.class7 {
    background-color:#FFB380;
}
.class9 {
    background-color:#FF80DB;
    color:#FFF;
}
#qjsjb{
    display:none;
}
a{
    display:inline-block;
    margin-top:20px;
}

JavaScript

window.onload = function(){
    var kcbNode = document.getElementById("kcb"),
        sjbNode = document.getElementById("qjsjb"),
        gotoSJBNode = document.getElementById("gotoSJB"),
        gotoKCBNode = document.getElementById("gotoKCB");
    
    gotoSJBNode.onclick = function(){
        kcbNode.style.display = "none";
        sjbNode.style.display = "block";
    }
    
    gotoKCBNode.onclick = function(){
        kcbNode.style.display = "block";
        sjbNode.style.display = "none";
    }
}