1. ホーム
  2. 質問と答え
  3. テーブルの問題を伴うJqueryアコーディオン

テーブルの問題を伴うJqueryアコーディオン

2011-07-25 18 views
0

私は初心者のコーダーであり、以下の問題について助けが必要です。私はテーブルとjQueryアコーディオン関数を使用してカレンダーを作成しようとしています。今では、画面全体に表が表示されます。私はアコーデオンをオンロードで閉じて、最初は月のタイトルしか見ないようにして、ホバーが起きたときに開くようにします。また、アコーディオンがトリガーされると、カレンダーが縮小しています。私はコードを基本に落とそうとしました。どんな支援も大いに評価されます。ここでテーブルの問題を伴う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;}

出典

2011-07-25 user862307

答えて

1

これはそれを行う必要があります。

$(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"); 
     }) 
});

出典

2011-07-25 23:56:26 Sparkup

+0

これは素晴らしいです。ありがとう。その月が現在表示されている場合、月の背景色を変更する方法はありますか？したがって、それがアクティブであることを示します。 – user862307

+0

あなたはたぶんサーバサイドスクリプトでそれをやっているほうがいいでしょう：php '<？php if（$ month == 'あなたの引数'）{echo 'class =" active "';}？>'そして、あなたのスタイルシートに – Sparkup

+0

お手伝いができてうれしく思います。 – Sparkup

0 

#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>

出典

2017-12-20 10:21:19

 関連する問題

  • 関連する問題はありません^_^