使用Laravel在表格内引导程序崩溃

Question

我想要做的是在用户使用引导程序崩溃按下按钮后显示特定顺序的详细信息结帐。

下面的图片将告诉你我所期望的解决方案。

之前单击按钮：

点击按钮理想的解决方案后，我想：

不采用这个结果我有（这是我的问题，每一个td元素仅在一行中）：

HTML：

<div class="container"> 
<h1>My Orders</h1> 
<h3>Total orders: {{$orders->total()}}</h3> 
<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th class="col-sm-4">Order Id</th>   
     <th class="col-sm-4">Total Paid</th> 
     <th class="col-sm-2">Order Date/Time</th> 
    </tr>  
    </thead> 
    <tbody> 
    @foreach($orders as $keyo => $item) 
     <tr style="width: 100%;"> 
      <td>{{$item->id}} <button class="btn btn-success fa fa-eye" type="button" data-toggle="collapse" data-target="#viewmyorder{{$keyo}}" aria-expanded="false" aria-controls="collapseExample"></td>    
      <td>{{ number_format($item->total_paid,2,',','') }} &euro;</td> 
      <td>{{$item->created_at}}</td>    
     </tr>  
     <tr id="viewmyorder{{$keyo}}" class="collapse" style="width: 100%;"> 
      <?php $orderitemtable = \App\OrderItem::all()->where('order_id', $item->id); ?> 
      @foreach($orderitemtable as $theitems) 
       <?php $findproducts = \DB::table('products')->select('id', 'name', 'code', 'price')->where('id', $theitems->product_id)->get(); ?> 
      @foreach($findproducts as $pr)       
       <td class="col-md-1">{{$pr->name}}</td> 
       <?php $findphoto = \App\Photo::where('product_id', $pr->id)->get()->first(); ?>    
       <td class="col-md-4"><img src="/{{$findphoto->show_path}}"></td>        
       <td class="col-md-1">{{$pr->code}}</td> 
       <td class="col-md-1">{{$pr->price}}</td>    
       @if($theitems->order_condition == 0) 
      <td class="col-md-2">Condition Order: Is in proccess</td> 
      @elseif($theitems->order_condition == 1) 
      <td class="col-md-2">Condition Order: We haven't enough items</td> 
      @elseif($theitems->order_condition == 2) 
      <td class="col-md-2">Condition Order: Order Completed</td> 
      @endif 
      @if(($theitems->order_comments != null)== true)  
      <td class="col-md-3">{{$theitems->order_comments}}</td> 
      @else 
      <td class="col-md-3">No comments in this item</td> 
      @endif   

      @endforeach  

      @endforeach 

     </tr> 
    @endforeach 

    </tbody> 
</table> 
</div> 

Answer 1

您可以使用崩溃表行手风琴。 这是最好的例子。 http://www.bootply.com/fdTMNTiLis