onclick get button muestra/oculta las siguientes filas entre el botón en el que se hizo clic y el botón siguiente.
Cómo mostrar estas filas como ocultas primero y luego puedo cambiar entre mostrarlas y ocultarlas. si es posible con vainilla JavaScript y CSS.
table, th, td { border: 1px solid black; } <table> <tr> <td><button>show/hide</button> A</td> <td>B</td> <td>C</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AAA</td> <td>BBB</td> <td>CCC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> </table>La clave aquí para lograr lo que quieres es usar .nextUntil("tr:has(button)")
como en:
$('table button').click(function() { var n = $(this).closest("tr").nextUntil("tr:has(button)"); n.toggle() })Manifestación
$('table button').click(function() { var n = $(this).closest("tr").nextUntil("tr:has(button)"); n.toggle() }) table, th, td { border: 1px solid black; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><button>show/hide</button> A</td> <td>B</td> <td>C</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AAA</td> <td>BBB</td> <td>CCC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> </table>Con vanilla javascript, puede utilizar el método indexOf para encontrar dónde está el elemento de la fila de la tabla que contiene el botón en el que se hizo clic y luego iterar sobre N filas y alternar el estado de visualización.
document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){ /* create an array from the nodelist so that `indexOf` can be used */ let col=[...document.querySelectorAll('tr')]; /* find the parent table row of the invoking button */ let tr=this.parentNode.parentNode; /* find which table row in the array was the event source */ let index=col.indexOf( tr ) + 1; /* process the next N records/rows */ for( let i=index; i < index + 2; i++ ){ col[i].style.display=col[i].style.display=='table-row' || col[i].style.display=='' ? 'none' : 'table-row' } })) table, th, td { border: 1px solid black; } tr{display:table-row} <table> <tr> <td><button>show/hide</button> A</td> <td>B</td> <td>C</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td><button>show/hide</button> AAA</td> <td>BBB</td> <td>CCC</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> </table>