jquery在laravel動態表中隱藏和顯示錶行

Question

我一直試圖讓顯示和隱藏某些錶行在動態生成的表中工作。該表本身從laravel集合中獲取數據。
表格背後的想法是，我們希望讓用戶顯示標籤組，這些組可以具有零個，一個或多個帶有該組編號的標籤。我在他們適當的組下面顯示標籤。

的代碼如下：

<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> 

表代碼生成以下表;圖像是表的一部分：

因爲列和行動態插入我不知道如何做一個click事件中，我可以說，當我點擊標題<th>元素，我可以隱藏下面的<td>元素（代表屬於<th>組的標籤）。每個<th>可以具有與該「組」相對應的不同數量的行。

有人能給我一些指標，說明我應該怎麼做？

Answer 1

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

這將在任何元素將點擊事件與類.class，當你點擊它，它就會切換類hiddenRow