Question

在这段代码中，我尝试在运行PHP for循环的表中显示表。我能够获取数据但无法修复UI和手风琴。我已经在表格中创建了表格，但是第二个表格显示在旁边，我需要在下一行，并且手风琴应该可以工作。

 <div>  <h1>Payment Detail</h1> </div>

    <input type="text" id="search-payment-detail" />
    <a href="/admin/member-payment-detail">Add Member Payment Detail</a>
    {{--{{dd($payment_details)}}--}}
    <div id="prefetched">
        <table class="table table-bordered">
            <thead>
            <tr>
            <td>Name</td>
            <td>Email</td>
            <td>Mobile</td>
            <td>Role</td>
            <td>Status</td>
            </tr>
             </thead>
            <tbody>
         @foreach($payment_details as $payment_detail)
        <tr class="tableshow">
            <td>{{$payment_detail->sc_fullname}}</td>
            <td>{{$payment_detail->sc_email}}</td>
            <td>{{$payment_detail->sc_mobile_no}}</td>
            <td>{{$payment_detail->role}}</td>
            <td>{{$payment_detail->status}}</td>



            <td><table style="display:none;width:100%" class="collapseshow table table-bordered">
                @foreach($payment_detail->payementDetail as $pd)

                        <td class="width:100%">p1: {{$pd->p1}}</td>
                        <td>p2:{{$pd->p2}}</td>
                        <td>p3:{{$pd->p3}}</td>
                        <td>p4:{{$pd->p4}}</td>
                        <td>p5:{{$pd->p5}}</td>
                        <td>p6:{{$pd->p6}}</td>
                        <td>p7:{{$pd->p7}}</td>
                        <td>p8:{{$pd->p8}}</td>
                        <td>p9:{{$pd->p9}}</td>
                        <td>p10:{{$pd->p10}}</td>
                        <td>p11:{{$pd->p11}}</td>
                        <td>p12:{{$pd->p112}}</td>
                        <a style="display:none" href="/admin/edit-member-payment-detail/{{$pd->id}}">Edit</a>
                        <a style="display:none" href="/admin/delete-member-payment-detail/{{$pd->id}}">Delete</a>

                @endforeach
            </table>

     </td>

@endforeach
</tr>
</tbody>
</table>

    </div>
    <div id="search-fetched"></div>

    <script>
        $('#search-payment-detail').keyup(function () {
            if ($.trim($('#search-payment-detail').val())) {
                $.get('/admin/search-member-payment-detail', {info: $('#search-payment-detail').val()}, function (data) {
                    var html = '<div>';

                   for (let i = 0; i < data.length; i++){
                       html += ` <table class="table table-bordered">
                       <tr>
                       <td>Name</td> 
                       <td>Email</td>
                        <td>Mobile</td> 
                        <td>Role</td>
                        <td>Status</td>
                        </tr> 
                           <tr>
                           <td>${data[i].sc_fullname}</td><td>${data[i].sc_email}</td><td>${data[i].sc_mobile_no}</td><td>${data[i].role}</td><td>${data[i].status}</td></tr></table>  <table class="table">`;
                       for (let j = 0; j < data[i].payement_detail.length; j++){
                           html+=`<tr>
                                    <td>p1 ${(data[i].payement_detail[j].p1 != null) ? data[i].payement_detail[j].p1 : ''}</td>
                                        <td>p2:${(data[i].payement_detail[j].p2 != null) ? data[i].payement_detail[j].p2 : ''}</td>
                                        <td>p3:${(data[i].payement_detail[j].p3 != null) ? data[i].payement_detail[j].p3 : ''}</td>
                                        <td>p4:${(data[i].payement_detail[j].p4 != null) ? data[i].payement_detail[j].p4 : ''}</td>
                                        <td>p5:${(data[i].payement_detail[j].p5 != null) ? data[i].payement_detail[j].p5 : ''}</td>
                                        <td>p6:${(data[i].payement_detail[j].p6 != null) ? data[i].payement_detail[j].p6 : ''}</td>
                                        <td>p7:${(data[i].payement_detail[j].p7 != null) ? data[i].payement_detail[j].p7 : ''}</td>
                                        <td>p8:${(data[i].payement_detail[j].p8 != null) ? data[i].payement_detail[j].p8 : ''}</td>
                                        <td>p9:${(data[i].payement_detail[j].p9 != null) ? data[i].payement_detail[j].p9 : ''}</td>
                                        <td>p10:${(data[i].payement_detail[j].p10 != null) ? data[i].payement_detail[j].p10 : ''}</td>
                                        <td>p11:${(data[i].payement_detail[j].p11 != null) ? data[i].payement_detail[j].p11 : ''}</td>
                                        <td>p12:${(data[i].payement_detail[j].p12 != null) ? data[i].payement_detail[j].p12 : ''}</td>
                                        <a href="/admin/edit-member-payment-detail/${data[i].payement_detail[j].id}">Edit</a>
                            </tr>`;
                       }
                   }
                    html += `</table></div>`
                    $('#search-fetched').empty().append(html);
                    $('#prefetched').hide();

                });
            } else {
                $('#prefetched').show();
                $("#search-fetched").empty();
            }
        })
$(document).ready(function(){
    $(".tableshow").click(function(){
        $(".collapseshow").toggle();
    });
});
    </script>

Answer 1

更改你的HTML

<table class="table table-bordered">
            <thead>
            <tr>
            <td>Name</td>
            <td>Email</td>
            <td>Mobile</td>
            <td>Role</td>
            <td>Status</td>
            </tr>
             </thead>
            <tbody>
         @foreach($payment_details as $payment_detail)
        <tr class="tableshow">
            <td>{{$payment_detail->sc_fullname}}</td>
            <td>{{$payment_detail->sc_email}}</td>
            <td>{{$payment_detail->sc_mobile_no}}</td>
            <td>{{$payment_detail->role}}</td>
            <td>{{$payment_detail->status}}</td>

</tr> ** Close here first TR **
<tr>            ** Add Colspan **
            <td colspan="5"><table style="display:none;width:100%" class="collapseshow table table-bordered">
                @foreach($payment_detail->payementDetail as $pd)

                        <td class="width:100%">p1: {{$pd->p1}}</td>
                        <td>p2:{{$pd->p2}}</td>
                        <td>p3:{{$pd->p3}}</td>
                        <td>p4:{{$pd->p4}}</td>
                        <td>p5:{{$pd->p5}}</td>
                        <td>p6:{{$pd->p6}}</td>
                        <td>p7:{{$pd->p7}}</td>
                        <td>p8:{{$pd->p8}}</td>
                        <td>p9:{{$pd->p9}}</td>
                        <td>p10:{{$pd->p10}}</td>
                        <td>p11:{{$pd->p11}}</td>
                        <td>p12:{{$pd->p112}}</td>
                        <a style="display:none" href="/admin/edit-member-payment-detail/{{$pd->id}}">Edit</a>
                        <a style="display:none" href="/admin/delete-member-payment-detail/{{$pd->id}}">Delete</a>

                @endforeach
            </table>

     </td>

@endforeach
</tr>
</tbody>
</table>

https://jsfiddle.net/ya6u2mtq/1/

在点击表动态手风琴表必须来

1 个答案: