Laravel 表格，每行都有编辑模式

Question

我想制作一个表格，每行都有一个编辑按钮。编辑按钮将呈现一个带有已加载数据的模式弹出窗口。

这是我的blade.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

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

您可以轻松地将您的employee_education 的ID 添加为模态的ID：

1. 您需要调整切换链接，将 employee_education->id 附加到 :

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

1. 将相同的 ID 附加到您的模态 ID

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

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

Answer 2

原因

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

这些模式中的每一个都将具有相同的 id 属性，因为您没有在循环中更改它（即每个模式的 id 都是 education_edit_modal）。

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

---

解决方案

1. 尝试在循环之外仅渲染一个模态，并使用data 属性向其传递数据。这样效率更高，并且不需要您进行某种动态 id 生成。

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