Jquery 手风琴与表问题

发布于 2024-11-26 16:22:53 字数 8324 浏览 0 评论 0原文

我是一名初学者编码器,需要解决以下问题的帮助。我正在尝试使用 jQuery 手风琴函数和表格制作日历。现在,完整的表格在屏幕加载上可见。我希望手风琴在加载时关闭,这样您首先只能看到月份标题,然后在悬停时打开。当手风琴被触发时,日历也会缩小。我尝试将代码简化为基础内容。任何帮助将不胜感激。

这是代码:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){


    $('table.CityTable th') .hover(
    function() {
        $(this) .parents('table.CityTable') .children('tbody') .toggle("slow");
    }
)

$('table.StateTable tr.statetablerow th') .hover(
    function() {
        $(this) .parents('table.StateTable') .children('tbody') .slideToggle("slow");
    }
)



});
    </script>


    </head>
    <body>
    <div id="container">
    <div id="contentarea"> <font class="title">2011  Calendar</font>
    <body>
    <div id="">
    <table class="StateTable" width="100%">
    <thead>
    <tr class="statetablerow">
    <th colspan="7">January</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left</td>
    <td valign=top align=left></td>
    <td valign=top align=left>1</td>
    </tr>
    <tr>
    <td valign=top align=left>2</td>
    <td valign=top align=left>3</td>
    <td valign=top align=left>4</td>
    <td valign=top align=left>5</td>
    <td align=left valign=top>6</td>
    <td valign=top align=left>7</td>
    </tr>
    <tr>
    <td valign=top align=left>9</td>
    <td valign=top align=left>10</td>
    <td valign=top align=left>11</td>
    <td valign=top align=left>12</td>
    <td valign=top align=left>13</td>
    <td valign=top align=left>14</td>
    <td valign=top align=left>15</td>
    </tr>
    <tr>
    <td valign=top align=left>16</td>
    <td valign=top align=left>17</td>
    <td valign=top align=left>18</td>
    <td valign=top align=left>19</td>
    <td valign=top align=left>20</td>
    <td valign=top align=left>21</td>
    <td valign=top align=left>22</td>
    </tr>
    <tr>
    <td valign=top align=left>23</td>
    <td valign=top align=left>24</td>
    <td valign=top align=left>25</td>
    <td valign=top align=left>26</td>
    <td valign=top align=left>27</td>
    <td valign=top align=left>28</td>
    <td valign=top align=left>29</td>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    </tr>
    </tbody>             
    </table>
    </div>


    <table class="StateTable" width="100%">
    <thead>
    <tr class="statetablerow">
    <th colspan="7">February</th>
    </tr>
    </thead>

    <tbody>

    <tr>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left</td>
    <td valign=top align=left></td>
    <td valign=top align=left>1</td>
    </tr>
    <tr>
    <td valign=top align=left>2</td>
    <td valign=top align=left>3</td>
    <td valign=top align=left>4</td>
    <td valign=top align=left>5</td>
    <td align=left valign=top>6</td>
    <td valign=top align=left>7</td>
    <td valign=top align=left>8</td>
    </tr>
    <tr>
    <td valign=top align=left>9</td>
    <td valign=top align=left>10</td>
    <td valign=top align=left>11</td>
    <td valign=top align=left>12</td>
    <td valign=top align=left>13</td>
    <td valign=top align=left>14</td>
    <td valign=top align=left>15</td>
    </tr>
    <tr>
    <td valign=top align=left>16</td>
    <td valign=top align=left>17</td>
    <td valign=top align=left>18</td>
    <td valign=top align=left>19</td>
    <td valign=top align=left>20</td>
    <td valign=top align=left>21</td>
    <td valign=top align=left>22</td>
    </tr>

    <tr>
    <td valign=top align=left>23</td>
    <td valign=top align=left>24</td>
    <td valign=top align=left>25</td>
    <td valign=top align=left>26</td>
    <td valign=top align=left>27</td>
    <td valign=top align=left>28</td>
    <td valign=top align=left>29</td>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    </tr>
    </tbody>             
    </table>

    </div>
    </body>
    </html>

这是CSS:

    #container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}

    #contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}

    table.CityTable, table.StateTable{width="100%"}

    table.StateTable{margin:0px;}

    table td{padding:5px;}

    table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}

    table.CityTable thead th{cursor:pointer; color:black;}

    table.StateTable td.nopad{padding:0;}

I am a beginner coder and need help with the following issues. I am trying to make a calendar using the jQuery accordion function with a table. Right now the full tables are visible on the screen load. I want the accordion to be closed onload so you would only see the Month titles at first, then would open when a hover takes place. Also the calendar is shrinking when the accordion is triggered. I tried to par down the code to the basics. Any assistance would greatly be appreciated.

Here is the code:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){


    $('table.CityTable th') .hover(
    function() {
        $(this) .parents('table.CityTable') .children('tbody') .toggle("slow");
    }
)

$('table.StateTable tr.statetablerow th') .hover(
    function() {
        $(this) .parents('table.StateTable') .children('tbody') .slideToggle("slow");
    }
)



});
    </script>


    </head>
    <body>
    <div id="container">
    <div id="contentarea"> <font class="title">2011  Calendar</font>
    <body>
    <div id="">
    <table class="StateTable" width="100%">
    <thead>
    <tr class="statetablerow">
    <th colspan="7">January</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left</td>
    <td valign=top align=left></td>
    <td valign=top align=left>1</td>
    </tr>
    <tr>
    <td valign=top align=left>2</td>
    <td valign=top align=left>3</td>
    <td valign=top align=left>4</td>
    <td valign=top align=left>5</td>
    <td align=left valign=top>6</td>
    <td valign=top align=left>7</td>
    </tr>
    <tr>
    <td valign=top align=left>9</td>
    <td valign=top align=left>10</td>
    <td valign=top align=left>11</td>
    <td valign=top align=left>12</td>
    <td valign=top align=left>13</td>
    <td valign=top align=left>14</td>
    <td valign=top align=left>15</td>
    </tr>
    <tr>
    <td valign=top align=left>16</td>
    <td valign=top align=left>17</td>
    <td valign=top align=left>18</td>
    <td valign=top align=left>19</td>
    <td valign=top align=left>20</td>
    <td valign=top align=left>21</td>
    <td valign=top align=left>22</td>
    </tr>
    <tr>
    <td valign=top align=left>23</td>
    <td valign=top align=left>24</td>
    <td valign=top align=left>25</td>
    <td valign=top align=left>26</td>
    <td valign=top align=left>27</td>
    <td valign=top align=left>28</td>
    <td valign=top align=left>29</td>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    </tr>
    </tbody>             
    </table>
    </div>


    <table class="StateTable" width="100%">
    <thead>
    <tr class="statetablerow">
    <th colspan="7">February</th>
    </tr>
    </thead>

    <tbody>

    <tr>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
    <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left</td>
    <td valign=top align=left></td>
    <td valign=top align=left>1</td>
    </tr>
    <tr>
    <td valign=top align=left>2</td>
    <td valign=top align=left>3</td>
    <td valign=top align=left>4</td>
    <td valign=top align=left>5</td>
    <td align=left valign=top>6</td>
    <td valign=top align=left>7</td>
    <td valign=top align=left>8</td>
    </tr>
    <tr>
    <td valign=top align=left>9</td>
    <td valign=top align=left>10</td>
    <td valign=top align=left>11</td>
    <td valign=top align=left>12</td>
    <td valign=top align=left>13</td>
    <td valign=top align=left>14</td>
    <td valign=top align=left>15</td>
    </tr>
    <tr>
    <td valign=top align=left>16</td>
    <td valign=top align=left>17</td>
    <td valign=top align=left>18</td>
    <td valign=top align=left>19</td>
    <td valign=top align=left>20</td>
    <td valign=top align=left>21</td>
    <td valign=top align=left>22</td>
    </tr>

    <tr>
    <td valign=top align=left>23</td>
    <td valign=top align=left>24</td>
    <td valign=top align=left>25</td>
    <td valign=top align=left>26</td>
    <td valign=top align=left>27</td>
    <td valign=top align=left>28</td>
    <td valign=top align=left>29</td>
    </tr>
    <tr>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    <td valign=top align=left></td>
    </tr>
    </tbody>             
    </table>

    </div>
    </body>
    </html>

Here is the CSS:

    #container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}

    #contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}

    table.CityTable, table.StateTable{width="100%"}

    table.StateTable{margin:0px;}

    table td{padding:5px;}

    table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}

    table.CityTable thead th{cursor:pointer; color:black;}

    table.StateTable td.nopad{padding:0;}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

苹果你个爱泡泡 2024-12-03 16:22:53

这应该可以做到:

$(document).ready(function(){

    $('table.StateTable tbody').hide(); //or add display:none in css
    $('table.StateTable').hover(
        function() {
            $(this).find('tbody').slideToggle("slow");
        },
        function() {
            $(this).find('tbody').slideToggle("slow");
        }) 
});

This should do it:

$(document).ready(function(){

    $('table.StateTable tbody').hide(); //or add display:none in css
    $('table.StateTable').hover(
        function() {
            $(this).find('tbody').slideToggle("slow");
        },
        function() {
            $(this).find('tbody').slideToggle("slow");
        }) 
});
旧人九事 2024-12-03 16:22:53
 #container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}

    #contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}

    table.CityTable, table.StateTable{width="100%"}

    table.StateTable{margin:0px;}

    table td{padding:5px;}

    table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}

    table.CityTable thead th{cursor:pointer; color:black;}

    table.StateTable td.nopad{padding:0;}
<div id="container">
    <div id="contentarea"> <font class="title">2011  Calendar</font>
    <div id="">
      <table class="StateTable" width="100%">
        <thead>
          <tr class="statetablerow header">
            <th colspan="7">January</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
          </tr>
          <tr>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left</td>
            <td valign=top align=left></td>
            <td valign=top align=left>1</td>
          </tr>
          <tr>
            <td valign=top align=left>2</td>
            <td valign=top align=left>3</td>
            <td valign=top align=left>4</td>
            <td valign=top align=left>5</td>
            <td align=left valign=top>6</td>
            <td valign=top align=left>7</td>
          </tr>
          <tr>
            <td valign=top align=left>9</td>
            <td valign=top align=left>10</td>
            <td valign=top align=left>11</td>
            <td valign=top align=left>12</td>
            <td valign=top align=left>13</td>
            <td valign=top align=left>14</td>
            <td valign=top align=left>15</td>
          </tr>
          <tr>
            <td valign=top align=left>16</td>
            <td valign=top align=left>17</td>
            <td valign=top align=left>18</td>
            <td valign=top align=left>19</td>
            <td valign=top align=left>20</td>
            <td valign=top align=left>21</td>
            <td valign=top align=left>22</td>
          </tr>
          <tr>
            <td valign=top align=left>23</td>
            <td valign=top align=left>24</td>
            <td valign=top align=left>25</td>
            <td valign=top align=left>26</td>
            <td valign=top align=left>27</td>
            <td valign=top align=left>28</td>
            <td valign=top align=left>29</td>
          </tr>
          <tr>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
          </tr>
        </tbody>             
      </table>
    </div>


    <table class="StateTable t-month" width="100%">
      <thead>
        <tr class="statetablerow header">
          <th colspan="7">February</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
        </tr>
        <tr>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left</td>
          <td valign=top align=left></td>
          <td valign=top align=left>1</td>
        </tr>
        <tr>
          <td valign=top align=left>2</td>
          <td valign=top align=left>3</td>
          <td valign=top align=left>4</td>
          <td valign=top align=left>5</td>
          <td align=left valign=top>6</td>
          <td valign=top align=left>7</td>
          <td valign=top align=left>8</td>
        </tr>
        <tr>
          <td valign=top align=left>9</td>
          <td valign=top align=left>10</td>
          <td valign=top align=left>11</td>
          <td valign=top align=left>12</td>
          <td valign=top align=left>13</td>
          <td valign=top align=left>14</td>
          <td valign=top align=left>15</td>
        </tr>
        <tr>
          <td valign=top align=left>16</td>
          <td valign=top align=left>17</td>
          <td valign=top align=left>18</td>
          <td valign=top align=left>19</td>
          <td valign=top align=left>20</td>
          <td valign=top align=left>21</td>
          <td valign=top align=left>22</td>
        </tr>

        <tr>
          <td valign=top align=left>23</td>
          <td valign=top align=left>24</td>
          <td valign=top align=left>25</td>
          <td valign=top align=left>26</td>
          <td valign=top align=left>27</td>
          <td valign=top align=left>28</td>
          <td valign=top align=left>29</td>
        </tr>
        <tr>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
        </tr>
      </tbody>             
    </table>
</div>


<!--- Script -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      
       $('table tbody').hide();
       $('table thead tr').mouseover(function() {
                $('table tbody').hide();
                $(this).parent().next().slideToggle("slow");
        });

      
    });
</script>

 #container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}

    #contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}

    table.CityTable, table.StateTable{width="100%"}

    table.StateTable{margin:0px;}

    table td{padding:5px;}

    table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}

    table.CityTable thead th{cursor:pointer; color:black;}

    table.StateTable td.nopad{padding:0;}
<div id="container">
    <div id="contentarea"> <font class="title">2011  Calendar</font>
    <div id="">
      <table class="StateTable" width="100%">
        <thead>
          <tr class="statetablerow header">
            <th colspan="7">January</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
            <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
          </tr>
          <tr>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left</td>
            <td valign=top align=left></td>
            <td valign=top align=left>1</td>
          </tr>
          <tr>
            <td valign=top align=left>2</td>
            <td valign=top align=left>3</td>
            <td valign=top align=left>4</td>
            <td valign=top align=left>5</td>
            <td align=left valign=top>6</td>
            <td valign=top align=left>7</td>
          </tr>
          <tr>
            <td valign=top align=left>9</td>
            <td valign=top align=left>10</td>
            <td valign=top align=left>11</td>
            <td valign=top align=left>12</td>
            <td valign=top align=left>13</td>
            <td valign=top align=left>14</td>
            <td valign=top align=left>15</td>
          </tr>
          <tr>
            <td valign=top align=left>16</td>
            <td valign=top align=left>17</td>
            <td valign=top align=left>18</td>
            <td valign=top align=left>19</td>
            <td valign=top align=left>20</td>
            <td valign=top align=left>21</td>
            <td valign=top align=left>22</td>
          </tr>
          <tr>
            <td valign=top align=left>23</td>
            <td valign=top align=left>24</td>
            <td valign=top align=left>25</td>
            <td valign=top align=left>26</td>
            <td valign=top align=left>27</td>
            <td valign=top align=left>28</td>
            <td valign=top align=left>29</td>
          </tr>
          <tr>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
            <td valign=top align=left></td>
          </tr>
        </tbody>             
      </table>
    </div>


    <table class="StateTable t-month" width="100%">
      <thead>
        <tr class="statetablerow header">
          <th colspan="7">February</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
          <th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
        </tr>
        <tr>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left</td>
          <td valign=top align=left></td>
          <td valign=top align=left>1</td>
        </tr>
        <tr>
          <td valign=top align=left>2</td>
          <td valign=top align=left>3</td>
          <td valign=top align=left>4</td>
          <td valign=top align=left>5</td>
          <td align=left valign=top>6</td>
          <td valign=top align=left>7</td>
          <td valign=top align=left>8</td>
        </tr>
        <tr>
          <td valign=top align=left>9</td>
          <td valign=top align=left>10</td>
          <td valign=top align=left>11</td>
          <td valign=top align=left>12</td>
          <td valign=top align=left>13</td>
          <td valign=top align=left>14</td>
          <td valign=top align=left>15</td>
        </tr>
        <tr>
          <td valign=top align=left>16</td>
          <td valign=top align=left>17</td>
          <td valign=top align=left>18</td>
          <td valign=top align=left>19</td>
          <td valign=top align=left>20</td>
          <td valign=top align=left>21</td>
          <td valign=top align=left>22</td>
        </tr>

        <tr>
          <td valign=top align=left>23</td>
          <td valign=top align=left>24</td>
          <td valign=top align=left>25</td>
          <td valign=top align=left>26</td>
          <td valign=top align=left>27</td>
          <td valign=top align=left>28</td>
          <td valign=top align=left>29</td>
        </tr>
        <tr>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
          <td valign=top align=left></td>
        </tr>
      </tbody>             
    </table>
</div>


<!--- Script -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      
       $('table tbody').hide();
       $('table thead tr').mouseover(function() {
                $('table tbody').hide();
                $(this).parent().next().slideToggle("slow");
        });

      
    });
</script>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文