JQuery скрывает и показывает строки таблицы в динамической таблице laravel

Я пытаюсь показать и скрыть определенные строки таблицы для работы в динамически сгенерированной таблице. Сама таблица получает свои данные из коллекции 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>

Код таблицы генерирует следующую таблицу; изображение является частью таблицы:

Пример таблицы

Поскольку столбцы и строки динамически вставлены, я понятия не имею, как сделать событие щелчка, в котором я могу сказать, что когда я нажимаю на <th>элемент заголовка , я могу скрыть <td>элементы подкладки (которые представляют метки, принадлежащие <th>группе). Каждый <th>может иметь различное количество строк, соответствующих этой «группе».

Может ли кто-нибудь дать мне некоторые индикаторы того, как я должен это делать?

javascript,php,jquery,laravel,laravel-5.2,

0

Ответов: 1


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

Это применит событие click для любых элементов класса, .classи когда вы нажмете на него, он переключит классhiddenRow

JavaScript, PHP, JQuery, Laravel, Laravel-5,2,
Похожие вопросы