表示方法を表示するにはJavascriptでスライドダウンエフェクトを使用する行はありませんか？

Question

私はいくつかの行が隠されていて、 "表示"ボタンがクリックされたときだけ可視化する行数のテーブルを持っています。私の質問は、どのように私は効果のスライドを下に私の行をブロック表示することができますか？ は、ここに私の抜粋です。

function toggleRow(e){ 
 
    var subRow = e.parentNode.parentNode.nextElementSibling; 
 
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';  
 
}

.subRow { 
 
    background-color: #CFCFCF; display:none; 
 
}

<table style="width:50%" border="1"> 
 
    <caption>Test Table</caption> 
 
    <thead> 
 
     <tr align="center" class="parentRow"> 
 
      <th>Column 1</th> 
 
      <th>Column 2</th>    
 
      <th>Column 3</th>    
 
      <th>Column 4</th>    
 
      <th>Column 5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="parentRow"> 
 
      <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
     </tr> 
 
     <tr class="subRow"> 
 
      <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td> 
 
     </tr> 
 
     <tr class="parentRow"> 
 
    <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
     </tr> 
 
     <tr class="subRow"> 
 
      <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td> 
 
     </tr> 
 

 
    </tbody> 
 
</table>

Answer 1

Voidは小文字でなければなりませんが、私はテーブルの行をアニメーション化する問題があるので、あなたは、テーブルを使用している代わりに

でpreventDefaultを使用しています。

slideToggle in table row

私が代わりにクラスを切り替えることをお勧めします

$(function() { 
 
    $(".show").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest("tr").next().find(".content").slideToggle(); 
 
    }); 
 
});

.subRow { 
 
    padding:0; 
 
    background-color: #CFCFCF; 
 

 
} 
 
.content { 
 
    background-color: #CFCFCF; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table style="width:50%" border="1"> 
 
    <caption>Test Table</caption> 
 
    <thead> 
 
    <tr align="center" class="parentRow"> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
     <th>Column 3</th> 
 
     <th>Column 4</th> 
 
     <th>Column 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="parentRow"> 
 
     <td><a href="#" class="show">SHOW</a> 
 
     </td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
    </tr> 
 
    <tr class="subRow"> 
 
     <td colspan="5"> 
 
     <div class="content"><p>Lorem ipsum dolor sit amet...</p></div> 
 
     </td> 
 
    </tr> 
 
    <tr class="parentRow"> 
 
     <td><a href="#" class="show">SHOW</a> 
 
     </td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
    </tr> 
 
    <tr class="subRow"> 
 
     <td colspan="5"> 
 
     <div class="content"><p>Lorem ipsum dolor sit amet...</p></div> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

を修正すること実装しました。

スクリプトエラーを避けるため、href="JavaScript:Void(0);"をhref="#"に変更しました。

あなたは、私はここに、余分なdivにアニメーションを追加留意すべきmax-height

で使用table-rowアニメーション化することができないため、高さのアニメーションが困難であると私はmax-height、使用下のトリック、値は常にコンテンツよりも大きくなるように設定する必要があります。これはなんとかされていない場合、スクリプトは前にこのコードは一度だけ実行し、私は上のクリックしたときにスライドアップすることはできません

function toggleRow(e){ 
 
    var subRow = e.parentNode.parentNode.nextElementSibling; 
 
    subRow.classList.toggle('RowShow'); 
 
    return false; 
 
}

.subRow td { 
 
    background-color: #CFCFCF; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
.subRow div { 
 
    max-height: 0; 
 
    transition: max-height 0.5s; 
 
    overflow: hidden; 
 
} 
 
.subRow.RowShow div { 
 
    max-height: 100px; 
 
    transition: max-height 1s; 
 
}

<table style="width:50%" border="1"> 
 
    <caption>Test Table</caption> 
 
    <thead> 
 
     <tr align="center" class="parentRow"> 
 
      <th>Column 1</th> 
 
      <th>Column 2</th>    
 
      <th>Column 3</th>    
 
      <th>Column 4</th>    
 
      <th>Column 5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="parentRow"> 
 
      <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
     </tr> 
 
     <tr class="subRow"> 
 
      <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td> 
 
     </tr> 
 
     <tr class="parentRow"> 
 
    <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
      <td>test cell</td> 
 
     </tr> 
 
     <tr class="subRow"> 
 
      <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td> 
 
     </tr> 
 

 
    </tbody> 
 
</table>