每行都有编辑模式的 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"

        >

但是模态每次只显示第一行数据。如何获取在我的模态中加载的单击行数据的数据

Answer 1

发生这种情况是因为您所有的模态框都具有相同的 ID。您可以轻松地将 employee_education 的 ID 添加为模态的 ID：您需要调整切换链接，将 employee_education->id 附加到以下 id：<a&nbsp;href="#"&nbsp;data-toggle="modal"&nbsp;id="education_edit_link"&nbsp; data-target="#education_edit_modal{{$employee_education->id}}"...将相同的 ID 附加到您的模态 ID<div&nbsp;class="modal&nbsp;fade"&nbsp;id="education_edit_modal{{$employee_education->id}}"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;>请注意：您正在使用$employee_education as $employee_educationforeach 循环。您可能需要重命名变量，因为它们的名称相同。

Answer 2

成因如果你检查DOM你会发现你有多个模态，因为它每次循环遍历你的$employee_education集合时都会渲染一个模态。这些模态中的每一个都将具有相同的id属性，因为您没有在循环中更改它（即每个模态都有一个 id&nbsp;education_edit_modal）。因为 anid应该是唯一的，所以它会在第一次找到带有 that 的元素时停止查找id。这就是为什么它总是包含循环中第一个对象的内容。解决方案尝试在循环之外只渲染一个模式，并使用data属性将数据传递给它。这样效率更高，并且不需要您进行某种动态 ID 生成。https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content