html - 使用 Laravel 在表内 Bootstrap 折叠

Question

我想做的是在用户点击带有 bootstrap collapse 的按钮后显示特定订单的详细信息。

下面的图片将向您展示我期望的解决方案。

点击按钮前:

点击按钮后我想要的理想解决方案:

但是我得到的不是这个结果(这是我的问题，每个 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

您可以使用 Accordion 来折叠表格行。这是最好的例子。 http://www.bootply.com/fdTMNTiLis