Jquery在laravel动态表中隐藏和显示表行

Question

I've been trying to get showing and hiding certain table rows to work in a dynamically generated table. The table itself gets its data from a laravel collection.
The idea behind the table is that we want to have users to show labelgroups, these groups can have zero, one, or more labels with that group number. I display the labels under their appropriate group.

The code is as follows:

<table id="labeltable" class="table table-bordered">
  @foreach($labelgroups as $labelgroup)
    @foreach($labelgroup->all() as $groep)
      <!-- Als de laatst ingevulde groep door de foreach loop verschillend is van de huidige groep, vul die dan in.
           Anders vul je deze en de rest van de headers niet in en wacht je tot er een nieuwe header is. -->
      @if($lastgroup !== $groep->groep)
        <thead>
          <tr>
            <td></td><!-- Empty line -->
          </tr>
          <tr style="background-color: #5cb85c">
            <th>{{ $groep->groep }}</th>
            <!-- Laatst ingevulde groep bepalen -->
            {{ $lastgroup = $groep->groep }}
            @if($event->present()->nl)
              <th>{{Initialise::lang('lbl.algemeen.taal_1')}}</th>
            @endif
            @if($event->present()->fr)
              <th>{{Initialise::lang('lbl.algemeen.taal_2')}}</th>
            @endif
            @if($event->present()->en)
              <th>{{Initialise::lang('lbl.algemeen.taal_3')}}</th>
            @endif
            @if($event->present()->de)
              <th>{{Initialise::lang('lbl.algemeen.taal_4')}}</th>
            @endif
          </tr>
        </thead>
      @endif
    @endforeach

    @foreach($labelgroup->all() as $label)
      <tbody>
        <tr class="{{ $groep->groep }}">
          <td>{{ $label->label }}</td>
          @if($event->present()->nl)
            <td>{!!  Form::textarea('taal_1',$label->taal_1, array('id' => $label->id.'_1','rows' => 2, 'data-taal' => 'taal_1', 'data-url' => LinkHelper::route('label.update',$label->id),'class' => 'form-control', 'onchange' => 'initialise.update("'.LinkHelper::route('label.update',$label->id).'","taal_1",this.value);')) !!}</td>
          @endif
          @if($event->present()->fr)
            <td>{!!  Form::textarea('taal_2',$label->taal_2, array('id' => $label->id.'_2','rows' => 2, 'data-taal' => 'taal_2', 'data-url' => LinkHelper::route('label.update',$label->id),'class' => 'form-control', 'onchange' => 'initialise.update("'.LinkHelper::route('label.update',$label->id).'","taal_2",this.value);')) !!}</td>
          @endif
          @if($event->present()->en)
            <td>{!!  Form::textarea('taal_3',$label->taal_3, array('id' => $label->id.'_3','rows' => 2, 'data-taal' => 'taal_3','data-url' => LinkHelper::route('label.update',$label->id),'class' => 'form-control', 'onchange' => 'initialise.update("'.LinkHelper::route('label.update',$label->id).'","taal_3",this.value);')) !!}</td>
          @endif
          @if($event->present()->de)
            <td>{!!  Form::textarea('taal_4',$label->taal_4, array('id' => $label->id.'_4','rows' => 2, 'data-taal' => 'taal_4','data-url' => LinkHelper::route('label.update',$label->id),'class' => 'form-control', 'onchange' => 'initialise.update("'.LinkHelper::route('label.update',$label->id).'","taal_4",this.value);')) !!}</td>
          @endif
        </tr>
      </tbody>
    @endforeach
  @endforeach
</table>

The table code generates the following table; the image is a part of the table:

Because the columns and rows are dynamically inserted I have no idea how to do a click event in which I can say that when I click on the header <th> element, I can hide the underlaying <td> elements (which represent labels that belong to the <th> group). Every <th> can have a different amount of rows corresponding with that 'group'.

Could somebody give me some indicators as to how I'm supposed to do this?

Answer 1

$('.class').on('click',function(){
    $(this).toggleClass('hiddenRow');
})

This will apply a click event on any elements with the class .class and when you click on it, it will toggle the class hiddenRow