<tr>動態表中的下拉問題。 html/php

我想在半自動生成的表中的另一個下方執行一個下拉錶行。我搜索了一下，發現你不能直接對錶格元素進行動畫處理。我嘗試用div封裝我的表格，並且動畫工作。<tr>動態表中的下拉問題。 html/php

我現在的問題是，我真的不知道如何繼續在特定的部分上循環制作帶有該div的表格。它只是以某種方式弄亂了桌子。

<body> 
<table> 
    <tbody> 
     <tr> 

      // HEAD OF TABLE // 

     </tr> 

     {{FOREACH}} 
     <tr> 

     // ALWAYS VISIBLE TR // 

     </tr> 
     <tr class="hidden hideable{{$i.id}}"> 

     //CONTENTS// 

     </tr> 
     {{/FOREACH}} 
    </tbody> 
</table>

$(document).ready(function() { 
$(".btn").click(function(e){ 
    e.preventDefault(); 
    var tar = $('.hideable'+$(this).attr('attrib_target')); 
    tar.slideToggle('slow'); 
    // tar.toggle(); 
}); 
});

我應該在哪裏打開和關閉div來有什麼功能？

編輯：我需要的是基本上是：

表頭（固定）

錶行與隱藏的更多信息（togglable）的基本信息（固定）

錶行

我遇到的問題是循環，因爲我需要將隱藏的表格行包裹在div和表格中（否則，div因爲它們的屬性而從表格中彈出）。這個循環不斷地混淆着我的不同嘗試，以便能夠對隱藏部分進行動畫製作。

謝謝。

來源

2017-06-16 Henri

目前尚不清楚你的意思。如果你把表格封裝在一個div中，它的工作原理是什麼？ – mkaatman

沒有足夠的代碼來發佈一個肯定的答案...但嘗試'控制檯日誌（$（this）.attr（'attrib_target'））;'，在點擊處理程序，看看你是否至少得到正確的ID值。 –

我可以得到正確的ID，沒問題。我唯一遇到的麻煩是動畫。我不知道在哪裏打開和關閉div，所以我可以在可隱藏部分的div內獲得一個乾淨的表格。 – Henri

表格元素的任何部分，無論是<tr>還是<tbody>，如果設置的高度小於內容的實際高度，則不會隱藏溢出的內容。這就是爲什麼動畫不適用於表格元素。我建議將您的內容包裝在<div>中，並使用slideToggle進行動畫製作。

請檢查下面的代碼：

$(document).ready(function() { 
 
    $(".btn").click(function(e) { 
 
    e.preventDefault(); 
 
    var tar = $('.hideable' + $(this).attr('data-target')); 
 
    tar.slideToggle('slow'); 
 
    // tar.toggle(); 
 
    }); 
 
});

.hidden { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     // HEAD OF TABLE // 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!-- {{FOREACH}} --> 
 
    <!-- FOREACH ITERATION 1 --> 
 
    <tr> 
 
     <td> 
 
     // ALWAYS VISIBLE TR // 
 
     <button type="button" class="btn" data-target="1">Show</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="hidden hideable1"> 
 
     //CONTENTS// 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <!-- END: FOREACH ITERATION 1 --> 
 
    <!-- FOREACH ITERATION 2 --> 
 
    <tr> 
 
     <td> 
 
     // ALWAYS VISIBLE TR // 
 
     <button type="button" class="btn" data-target="2">Show</button> 
 
     </td> 
 
    </tr> 
 
    <tr class=""> 
 
     <td> 
 
     <div class="hidden hideable2"> 
 
     //CONTENTS// 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <!-- END: FOREACH ITERATION 2 --> 
 
    <!-- {{/FOREACH}} --> 
 
    </tbody> 
 
</table>

來源

2017-06-16 05:12:14

謝謝，很好地工作。 – Henri

我很高興它有幫助！ –

<tr>動態表中的下拉問題。 html/php

回答

相關問題