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

我一直试图让显示和隐藏某些表行在动态生成的表中工作。该表本身从laravel集合中获取数据。
表格背后的想法是，我们希望让用户显示标签组，这些组可以具有零个，一个或多个带有该组编号的标签。我在他们适当的组下面显示标签。jquery在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>可以具有与该“组”相对应的不同数量的行。

有人能给我一些指标，说明我应该怎么做？

来源

2016-10-17 Sébastien Bulté

只需添加和CSS。 HiddenRows {display：none}在JavaScript中，你可以删除这个类。 –

问题是我不知道如何处理标题下面的行，因为我在其他地方定义了行，并且无法通过DOM获取它们。 –

这些行上是否有用户交互？如果是，那么你可以或应该有东西来识别要隐藏的行。你想隐藏所有的行或特定的行？ –

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

这将在任何元素将点击事件与类.class，当你点击它，它就会切换类hiddenRow

来源

2016-10-17 10:59:02 WebKenth

我不能使用这样的类，因为我不想关闭所有tr标签。这是行不通的原因是因为我用循环 - > @foreach（$ labelgroup as $ groep）向表中添加元素，因此似乎无法找到一种方法为这些元素提供一个我可以使用的独特类用事件处理。 –

你不需要每个TR的独特类。对所有TR使用一个类来隐藏它们，然后当您单击该类的一行时，将该类从该行中删除，在那里只显示您点击的行，您可以运行一个循环并添加如果您想再次隐藏课程，请上课 – WebKenth

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

回答

相关问题