Tengo una table con expansión y contracción que ya funciona, pero me gustaría agregar los botones + y - para que la funcionalidad sea más dinámica. Alguien me puede ayudar con eso?
$('tr.header').click(function() { $(this).nextUntil('tr.header').css('display', function(i, v) { return this.style.display === 'table-row' ? 'none' : 'table-row'; }); }); tr { display: none; } tr.header { display: table-row; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table border="0"> <tr class="header"> <td colspan="2">Header</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr class="header"> <td colspan="2">Header</td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> </table>Para hacer lo que necesita, puede agregar un elemento de span a la celda .header para que contenga el + o - . Cuando se produce el clic, puede intercambiar los caracteres en función de sus valores actuales.
También tenga en cuenta que puede usar una clase CSS para mostrar los elementos tr , lo que hace que el JS sea un poco más limpio, ya que puede usar toggleClass() en lugar de un ternario en css() .
$('tr.header').click(function() { $(this) .find('span').text((i, t) => t === '+' ? '-' : '+').end() .nextUntil('tr.header').toggleClass('show'); }); tr { display: none; } tr.show { display: table-row; } tr.header { display: table-row; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table border="0"> <tr class="header"> <td colspan="2">Header <span>+</span></td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr class="header"> <td colspan="2">Header <span>+</span></td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> </table>