PHP foreach循环中使用Modal查看数据始终显示同一内容的问题

核心问题 #

1. 模态框ID重复：循环生成了多个id="modal-ver"的模态框，但HTML中ID必须唯一，浏览器只会响应第一个（或最后一个）匹配的ID，导致无论点击哪行按钮，都显示同一个模态框。
2. 表格行结构错误：<tr>标签写在foreach循环外，所有数据被渲染到同一行，属于HTML结构错误。
3. 按钮ID重复：多个查看按钮共用id="viewID"，违反了ID唯一的规则。

修复后的完整代码 #

<table class="table table-bordered table-hover table-striped" id="mitabla" border="1">
  <thead>
    <tr>
      <th class="text-center" style="width: 40px;">#</th>
      <th><p>Marcar</p><input type="checkbox" id="casilla"></th>
      <th>Host Name </th>
      <th>Nº de Serie </th>
      <th>Modelo</th> 
      <th>Cargador</th>
      <th>Maletín</th>
      <th>Docking</th>
      <th>Ratón / Teclado</th>
      <th>Observaciones</th>
      <th>Usuario</th>
      <th class="text-center" style="width: 100px;">Acciones</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($all_informatica as $infor): ?>
    <tr> 
      <td class="text-center"><?php echo (int)$infor['id'];?></td>
      <td><input type="checkbox" class="casilla" name="casilla[]" value="<?php echo $infor['id'];?>"></td>
      <td><?php echo remove_junk(ucwords($infor['hostName']))?></td>
      <td><?php echo remove_junk(ucwords($infor['nSerie']))?></td>
      <td><?php echo remove_junk(ucwords($infor['modelo']))?></td>
      <td><?php echo remove_junk(ucwords($infor['cargador']))?></td>
      <td><?php echo remove_junk(ucwords($infor['maletin']))?></td>
      <td><?php echo remove_junk(ucwords($infor['docking']))?></td>
      <td><?php echo remove_junk(ucwords($infor['ratonTeclado']))?></td>
      <td><?php echo remove_junk(ucwords($infor['notas']))?></td>
      <td>
        <select class="form-control" name="usuario" disabled>
          <option value="">Usuarios</option>
          <?php  foreach ($all_users as $users): ?>
            <option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
              <?php echo remove_junk($users['name']); ?></option>
          <?php endforeach; ?>
        </select>
      </td>
      <td class="text-center">
        <div class="btn-group">
          <button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id'];?>" value="<?php echo $infor['id'];?>" title="Ver">
            <i class="glyphicon glyphicon-eye-open"></i>
          </button>
          <a href="edit_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-warning" data-toggle="tooltip" title="Editar">
            <i class="glyphicon glyphicon-pencil"></i>
          </a>
          <a href="#" data-href="delete_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete" title="Eliminar">
            <i class="glyphicon glyphicon-remove"></i>
          </a>
        </div>
      </td>
    </tr>
    <?php endforeach;?>
  </tbody>
</table>
</form>
<div class="pull-left">
  <a href="export_informatica.php" class="btn btn-danger" target="_blank">Exportar PDF</a>
</div>

<!-- modal -->
<?php foreach($all_informatica as $infor): ?>       
<div class="modal fade" id="modal-ver-<?php echo $infor['id'];?>" >   
  <div class="modal-dialog">
    <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>
        <h4 class="modal-title">Informacion del equipo</h4>
      </div>
      <div class="modal-body" id="nombre-<?php echo $infor['id'];?>">
        <div class="row">
          <div class="col-xs-12">
            <h2><strong>Host Name portátil : </strong> <?php echo $infor['hostName']; ?> </h2>
            <table class="table table-bordered">
              <tbody> 
                <tr>       
                  <th style="background-color: #f4f4f4;">Host Name</th>
                  <td><?php echo $infor['hostName']; ?></td>
                  <th style="background-color: #f4f4f4;">Nº de Serie</th>
                  <td><?php echo $infor['nSerie']; ?></td>
                </tr>
                <tr>
                  <th style="background-color: #f4f4f4;">Modelo</th>
                  <td><?php echo $infor['modelo']; ?></td>
                  <th style="background-color: #f4f4f4;">Cargador</th>
                  <td><?php echo $infor['cargador']; ?></td>
                </tr>
                <tr>
                  <th style="background-color: #f4f4f4;">Maletín</th>
                  <td><?php echo $infor['maletin']; ?></td>
                  <th style="background-color: #f4f4f4;">Docking</th>
                  <td><?php echo $infor['docking']; ?></td>
                </tr>
                <tr>
                  <th style="background-color: #f4f4f4;">Ratón / Teclado</th>
                  <td><?php echo $infor['ratonTeclado']; ?></td>
                  <th style="background-color: #f4f4f4;">Observaciones</th>
                  <td><?php echo $infor['notas']; ?></td>
                </tr>
                <tr>
                  <th style="background-color: #f4f4f4;">Usuario</th>
                  <td>
                    <select class="form-control" name="usuario">
                      <option value="">Usuarios</option>
                      <?php  foreach ($all_users as $users): ?>
                        <option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
                          <?php echo remove_junk($users['name']); ?>
                        </option>
                      <?php endforeach; ?>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table> 
          </div>
        </div>
      </div>      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre-<?php echo $infor['id'];?>')" ><span class="fa fa-print"> </span>Imprimir</button>
      </div>
    <!-- /.modal-content -->
    </div>
   <!-- /.modal-dialog -->   
  </div>
  <!-- /.modal-default -->
</div>
<?php endforeach; ?>

关键修改点 #

1. 表格行修复：将<tr>移到foreach循环内部，每条数据对应独立表格行。
2. 模态框唯一ID：给模态框ID添加数据ID后缀，确保每个模态框ID唯一。
3. 按钮目标匹配：修改查看按钮的data-target为对应模态框的唯一ID，点击时打开正确的模态框。
4. 移除重复按钮ID：删除按钮的id="viewID"，保留class即可。
5. 打印功能适配：修改打印按钮的imprSelec参数为唯一的模态框body ID，保证打印内容正确。

内容的提问来源于stack exchange，提问作者Monica