每行带有编辑模式的Laravel表

Question

我想在每一行中制作一个带有编辑按钮的表格。编辑按钮将呈现带有该行加载数据的模态弹出窗口。

这是我的刀。php

<div class="card-body">       
    @foreach($employee_education as $employee_education)
        <div class="card card-primary card-outline">
            <div class="card-header bg-white">
                <h5 class="card-title m-0">
                    {{ $employee_education->degree_title }}
                </h5>
                <a 
                    href="#" 
                    data-toggle="modal" 
                    id="education_edit_link" 
                    data-target="#education_edit_modal" 
                    class="btn  btn-primary btn-xs" 
                    style="float:right;color:white!important;"
                >
                    <i class="fas fa-edit"></i> Edit
                </a>
            </div>
            <div class="card-body bg-light">
                <table class="table table-hover table-sm  table-borderless">
                    <tbody>
                        <tr>
                            <th>Degree Title</th>
                            <td>{{$employee_education->degree_title}}   </td>
                        </tr>
                        <tr>
                            <th>Institute</th>
                            <td>{{$employee_education->institute}}  </td>
                        </tr>
                        <tr>
                            <th>Address </th>
                            <td>{{$employee_education->address}}    </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modal -->
        <div 
            class="modal fade" 
            id="education_edit_modal" 
            tabindex="-1" 
            role="dialog" 
            aria-labelledby="connection_detailsLabel" 
            aria-hidden="true"
        >
           <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="card-body">
                            <table class="table table-hover table-sm  table-borderless">
                                <tbody>
                                    <tr>
                                        <th>Degree Title</th>
                                        <td>{{$employee_education->degree_title}}   </td>
                                    </tr>
                                    <tr>
                                        <th>Institute</th>
                                        <td>{{$employee_education->institute}}  </td>
                                    </tr>
                                    <tr>
                                        <th>Address </th>
                                        <td>{{$employee_education->address}}    </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" type="submit" id="btn_update" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End -->    
@endforeach

但该模型每次仅显示第一行数据。如何获取已单击行的数据加载到模式中

Answer 1

原因

如果您检查DOM，您会发现您有多个模态，因为它每次循环通过$employee_education集合时都会呈现一个模态。

这些模式中的每一个都将具有相同的id属性，因为您在循环中不改变这个属性（即每个模式的id都是education\u edit\u modal）。

由于id应该是唯一的，它将在第一次找到具有id的元素后停止查找。这就是为什么它总是包含循环中第一个对象的内容。

解决方案

1. 尝试在循环外部渲染单个模式，并使用属性传递数据。这更高效，并且不需要进行某种动态id生成

https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Answer 2

发生这种情况是因为您的所有情态动词都具有相同的id。

您可以轻松地将employee_education的id添加为模式的id：

1. 您需要调整切换链接，添加employee_education-

<a href="#" data-toggle="modal" id="education_edit_link" 
data-target="#education_edit_modal{{$employee_education->id}}"...

<div class="modal fade" id="education_edit_modal{{$employee_education->id}}" 
        ... >

请注意：您正在foreach循环中使用$employee\u education作为$employee\u education。您可能需要重命名变量，因为它们的名称相同。