onclick get button show/hide next rows between the clicked button and next button.
How to display these rows as hidden first and after that i can switch between show and hide them. if it is possible with vanilla JavaScript and 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The key here to achieve what you want is to use .nextUntil("tr:has(button)")

as in:

$('table button').click(function() {
  var n = $(this).closest("tr").nextUntil("tr:has(button)");
  n.toggle()
})

Demo

Show code snippet

$('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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

With vanilla javascript you can utilise the indexOf method to find where the table-row element containing the clicked button is and then iterating over N rows after and toggling the display state.

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>