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

时间:2016-10-17 08:22:57

标签: javascript php jquery laravel laravel-5.2

我一直在尝试显示和隐藏某些表行,以便在动态生成的表中工作。表本身从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>

表格代码生成下表;图像是表格的一部分:

Table example

因为列和行是动态插入的,所以我不知道如何进行点击事件,我可以说当我点击标题<th>元素时,我可以隐藏底层<td>元素(表示属于<th>组的标签)。每个<th>可以有与该组&#39;对应的不同行数。

有人可以给我一些关于我应该怎么做的指标吗?

1 个答案:

答案 0 :(得分:0)

f2

这将对类$('.class').on('click',function(){ $(this).toggleClass('hiddenRow'); }) 的所有元素应用点击事件,当您点击它时,它将切换课程.class