动态引导表列 Foreach

Question

嗨团队， 实际上我只是想像这样渲染数据 期望值如下所示：-

但即将到来的价值如下所示：-

** 我在我的 Laravel 项目中使用它这是我的代码：-**

<table class="table table-striped table-bordered">
<thead>
    <tr>
      <th scope="col">Skills</th>
      <th scope="col">Abilities</th>
      <th scope="col">Work Value</th>
      <th scope="col">Work Context</th>
    </tr>
</thead>
<?php
    $sub_skill = ["Skill 1","skill 2"];
    $sub_abilities = ["Ability 1","Ability 2","Ability 3","Ability 4","Ability 5","Ability 6"];
    $sub_workactivity = ["workactivity 1","workactivity 2"];
    $sub_workcontext = ["workcontext 1","workcontext 2", "workcontext 3"];
?>
<tbody>
    @foreach($sub_skill as $skill_key=>$skill_value)
           <tr>
               <td>{{ $skill_value }}</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
    @endforeach
       @foreach($sub_abilities as $abilities_key=>$abilities_value)
           <tr>
             <td></td>
             <td>{{ $abilities_value }}</td>
             <td></td>
             <td></td>
           </tr>
       @endforeach
       @foreach($sub_workactivity as $sub_workactivity_key=>$sub_workactivity_value)
           <tr>
             <td></td>
             <td></td>
             <td>{{ $sub_workactivity_value }}</td>
             <td></td>
           </tr>
       @endforeach
       @foreach($sub_workcontext as $workcontext_key=>$workcontext_value)
           <tr>
             <td></td>
             <td></td>
             <td></td>
             <td>{{ $workcontext_value }}</td>
           </tr>
       @endforeach
</tbody>

请帮助我。 感谢团队

Answer 1

你需要一个循环，每次迭代是一行。所以计算所有集合的最大长度，并使用这个长度的for循环。

//pseudo code
@for($i=0; $i<$max_length; $i++)
       <tr>
           <td>{{ isset($sub_skill[$i]) ? $sub_skill[$i] : '' }}</td>
           <td>{{ isset($sub_abilities[$i]) ? $sub_abilities[$i] : '' }}</td>
           <td>{{ isset($sub_workactivity[$i]) ? $sub_workactivity[$i] : '' }}</td>
           <td>{{ isset($sub_workcontext[$i]) ? $sub_workcontext[$i] : '' }}</td>
       </tr>
@endfor