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

1. 您需要调整切换链接，将 employee_education->id 附加到以下 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}}" 
        ... >

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

Answer 2

成因

如果你检查DOM你会发现你有多个模态，因为它每次循环遍历你的$employee_education集合时都会渲染一个模态。

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

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

---

解决方案

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

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