时间戳

首页 > 解决方案 > 每个表格行上的弹出框和内容

php - 每个表格行上的弹出框和内容

问题描述

原始代码

<tbody id="table">
                            @foreach($services as $service)
                                    <tr>
                                        <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
                                          @if($service->brand != '')
                                            <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
                                          @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>@lang('general.package_id')</th>
                                        <th>@lang('general.name')</th>
                                        <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
                                        <th>@lang('general.minimum_quantity')</th>
                                        <th>@lang('general.maximum_quantity')</th>
                                        <th>@lang('general.description')</th>
                                    </tr>
                                    @foreach($packages as $package)
                                        @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
                                        <tr>
                                            <td>{{ $package->id }}</td>
                                            <td>{{ $package->name }}</td>
                                            <td>
                                                @php
                                                    $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
                                                @endphp
                                                {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
                                            </td>
                                            <td>{{ $package->minimum_quantity }}</td>
                                            <td>{{ $package->maximum_quantity }}</td>
                                            <td style="white-space: pre-line">{{ $package->description }}</td>

                                        </tr>



                                        @endif
                                    @endforeach
                            @endforeach
                        </tbody>

我试图用一个按钮替换“{{ $package->description }}”以在新的弹出窗口中显示内容，使用它。

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>

但是我在每个按钮上都得到了相同的内容，但是内容必须不同，因为每一行都赢得了服务名称+描述。弹出框上的此描述必须不同。

标签： phphtml

解决方案

问题可能是由您的模态 ID 引起的。由于您所有的模式都有 id “exampleModalCenter”，因此您的 Button 可能只打开它可以找到的第一个（因为 id 应该是唯一的）。如果您要动态更改模态 ID 和相应的 Button-target

添加您的包 ID 的示例：

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter-{{ $package->id }}">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter-{{ $package->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>

推荐阅读