HTML5 - come comprimere ed espandere degli elementi della tabella complicati

Question

Ciao, ho bisogno di una funzione di espansione e compressione per un tavolo. Il codice trovato sulla riga più è per e quindi in js definisce una funzione per questa classe tr.

Ma il mio caso è più complicato visto come un'immagine. Si espanderà dopo aver fatto clic su "Parametro 1" e mostrare una cella unita e 2 celle.

Quindi, in questo caso, come posso realizzare questa funzione? Grazie in anticipo.

allegato è un semplice frammento per la tavola per il test:

https://jsfiddle.net/knspgwkq/

html per la tabella di prova

<table width="200" border="1"> 
    <tr> 
    <td rowspan="5">Summary 1</td> 
    <td colspan="2"><div align="center">1 st level</div></td> 
    </tr> 
    <tr> 
    <td colspan="2"><div class="P1">Parameter 1</div></td> 
    </tr> 
    <tr> 
    <td rowspan="2">Sub level-1 </td> 
    <td>Sub parameter (1)</td> 
    </tr> 
    <tr> 
    <td>Sub parameter (2)</td> 
    </tr> 
    <tr> 
    <td colspan="2"><div class="P2">Parameter 2</div></td> 
    </tr> 
</table> 

JS

$('.P1').click(function(){ 
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'}); 
    $(this).nextUntil('.P2').slideToggle(100, function(){ 
    }); 
}); 

Answer 1

Come aggiungere l'attributo di dati personalizzati alle celle che si desidera controllare? Esempio dal vivo https://jsfiddle.net/knspgwkq/7/

Il genitore conterrà data-collapsable-parent con un valore chiave. E i tuoi figli che desideri nascondere/mostrare con i genitori precedenti manterranno data-collapsable-child con lo stesso valore chiave di padre.

E se sono necessari ulteriori elementi espandibili collassabili, controllare questo esempio Facendo clic su Parametro 1, quindi Parametro secondario (2), si aprirà un elemento aggiuntivo.

https://jsfiddle.net/knspgwkq/9/

$('[data-collapsable-parent]').click(function(){ 
 
    var child = $(this).attr("data-collapsable-parent"); 
 
    $('[data-collapsable-child="'+ child + '"]').toggle('slow'); 
 
});

[data-collapsable-child] { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="200" border="1"> 
 
    <tr> 
 
    <td rowspan="5">Summary 1</td> 
 
    <td colspan="2"><div align="center">1 st level</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2" data-collapsable-parent="1"><div class="P1">Parameter 1</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-collapsable-child="1" rowspan="2">Sub level-1 </td> 
 
    <td data-collapsable-child="1" >Sub parameter (1)</td> 
 
    </tr> 
 
    <tr> 
 
    <td data-collapsable-child="1" >Sub parameter (2)</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"><div class="P2">Parameter 2</div></td> 
 
    </tr> 
 
</table>

Answer 2

Ecco un'idea: utilizzare due commuta per ottenere l'effetto collasso verso l'alto, e l'espansione verso il basso effetto (senza modificare la struttura tabella).

// Basic toggle without animation 
 
//$('.P1').on("click", function() { 
 
// $(this).closest("tr").nextUntil('.P2').toggle(); 
 
//}); 
 

 
// Better sliding toggle 
 
$('.P1').on("click", function() { 
 
    $trs = $(this).closest("tr").nextUntil('.P2'); 
 
    $trs.eq(1).find("td").eq(0).slideToggle(100, function() { 
 
    $trs.eq(0).slideToggle(100); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="200" border="1"> 
 
    <tr> 
 
    <td rowspan="5">Summary 1</td> 
 
    <td colspan="2"> 
 
     <div align="center">1 st level</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> 
 
     <div class="P1">Parameter 1</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2">Sub level-1</td> 
 
    <td>Sub parameter (1)</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Sub parameter (2)</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> 
 
     <div class="P2">Parameter 2</div> 
 
    </td> 
 
    </tr> 
 
</table>