1. 首頁
  2. 問答
  3. JQuery Accordion th

JQuery Accordion th

2014-04-18 71 views
1

這對你來說應該是一件容易的事。我想要一個有擴大行數的表格。我正試圖在class =「Accordion1」上實現JQuery手風琴。 它根本不起作用。 我在做什麼錯？JQuery Accordion th

... 
<script> 
$(function() { 
$("th.Accordion1").accordion(); 
}); 
</script> 
</head> 

<body> 
<table> 
<tbody> 

    <tr> 
     <th colspan="2" class="Accordion1">GROUP 1</th> 
    </tr> 
    <tr> 
     <th>Name</th> 
     <th>Note</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>-</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>-</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>-</td> 
    </tr> 

    <tr> 
     <th colspan="2" class="Accordion1">GROUP 2</th> 
    </tr> 
    <tr> 
     <th>Name</th> 
     <th>Note</th> 
    </tr> 
    <tr> 
     <td>1</td> 

     <td>-</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>-</td> 
    </tr> 

</tbody> 
</table>

謝謝！

來源

2014-04-18 user3548520

回答

0

我知道這個職位是很老，但我有一個規定，認爲反正張貼他們的問題，有兩種不同的解決方案，也許有人是感謝它。

您可以在我的Pen上找到兩個選項。

其中包括 「1組」 和 「組2」 ...

<div class="options" id="op1"> 
    <div class="accordion"> 
     <h3>GROUP 1</h3> 
     <table> 
      <thead> 
       <th>Name</th> 
       <th>Note</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>-</td> 
       </tr> 
      </tbody> 
     </table> 
     <h3>GROUP 2</h3> 
     <table> 
      <thead> 
       <th>Name</th> 
       <th>Note</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>-</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>-</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

，一個沒有

<div class="options" id="op2"> 
    <table> 
     <thead> 
      <th>Name</th> 
      <th>Note</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>-</td> 
      </tr> 
     </tbody> 

     <thead> 
      <th>Name</th> 
      <th>Note</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>-</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>-</td> 
      </tr> 
     </tbody> 
    </table> 

</div>

要知道，這個工作你必須包括jQuery和jquery- UI！

我已經添加了手風琴和CSS的選項是可選的...;）

來源

2017-08-11 14:05:48 Kathara

相關問題

 相關問題