Javascript 每行带有编辑模式的Laravel表格

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

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

---

但是模态每次只显示第一行数据。如何在模态中加载单击行的数据？这种情况发生是因为所有模态都具有相同的id

您可以轻松地将员工教育的id添加为模式的id：

您需要调整您的切换链接，将employee_education->id附加到以下人员的id： 将相同的id附加到modals id 请注意:

---

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

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

您可以轻松地将员工教育的id添加为模式的id：

您需要调整您的切换链接，将employee_education->id附加到以下人员的id： 将相同的id附加到modals id 请注意: 您正在foreach循环中使用$employee_education作为$employee_education。您可能需要重命名变量，因为它们的名称相同。

如果你检查DOM，你会发现你有多个模态，因为它每次在$employee_集合中循环时都会呈现一个模态

这些模态中的每一个都将具有相同的id属性，因为您不会在循环中更改此属性，即每个模态都将具有教育\编辑\模态的id

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

解决方案

尝试只渲染循环外部的单个模式，并使用数据属性传递数据。这更有效，并且不需要生成某种类型的动态id。 原因

如果你检查DOM，你会发现你有多个模态，因为它每次在$employee_集合中循环时都会呈现一个模态

这些模态中的每一个都将具有相同的id属性，因为您不会在循环中更改此属性，即每个模态都将具有教育\编辑\模态的id

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

解决方案

尝试只渲染循环外部的单个模式，并使用数据属性传递数据。这更有效，并且不需要生成某种类型的动态id。 不要在循环中使用相同的id属性。id在文档中必须是唯一的不要在循环中使用相同的id属性。ID在文档中必须是唯一的。关于数据属性的好理解，我一开始没有想到。关于数据属性的好理解，我一开始没有想到。

<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}}" 
        ... >