时间戳

首页 > 解决方案 > Laravel 表格，每行都有编辑模式

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

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

标签： javascriptjquerylaravellaravel-blade

解决方案

发生这种情况是因为您所有的模态都具有相同的 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_education在 foreach 循环中使用。您可能需要重命名变量，因为它们的名称相同。

推荐阅读