div元素如何影响向PHP传递参数？模态框行ID传递异常分析

问题场景 #

我有一个展示数据库信息的表格，基础功能运行正常。现在要实现点击每行的编辑按钮，获取对应行的ID并传给修改名称的编辑函数，但模态框出现了问题：

• 直接打印行ID时，能正确输出1、2、3等对应行的数值
• 通过模态框传递ID时，不管点击哪一行，输出的ID始终是'1'

原因分析 #

问题根源在于DOM元素ID的唯一性规则：
浏览器规定HTML页面中的ID必须是唯一标识，当存在多个相同ID的元素时，只会匹配页面中第一个出现的该ID元素。如果所有行的模态框都使用同一个ID，点击任意行的编辑按钮，data-target选择器都会定位到第一个模态框，自然只能拿到第一行的ID值。而div作为模态框的外层容器，重复的ID会直接导致模态框与行的关联逻辑失效。

解决方案 #

给每一行的模态框设置唯一ID，同时在表单中添加隐藏输入框存储对应行的ID，确保每个编辑按钮对应专属的模态框：

<button class="btn btn-warning text-white btn-sm edit" value="lecture" data-toggle='modal' data-target='#editModal_<?php echo $row['lec_id']?>'>
  <i class="glyphicon glyphicon-pencil"></i>
</button>
<div class='modal fade' id='editModal_<?php echo $row['lec_id']?>' tabindex='-1' role='dialog' aria-labelledby='editModalLabel'>
  <div class='modal-dialog' 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>
        <h4 class='modal-title' id='editModalLabel'>修改讲座名称</h4>
      </div>
      <div class='modal-body'>
        <form method='post' action='<?=rootDirectory?>admin'>
          <div class='form-group'>
            <label for='lec_name' class='control-label'>讲座名称：</label>
            <input type='text' class='form-control lec_name' id='lec_name' name='lec_name'>
          </div>
          <div class='modal-footer'>
            <button type='button' class='btn btn-primary' data-dismiss='modal'>关闭</button>
            <input class='btn btn-primary' name='editLecture' type='submit' value='保存'>
            <input type="hidden" value='<?=$row['lec_id']?>' name="lec_id" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

核心改动说明：

• 按钮的data-target和模态框的id都拼接了行ID，生成唯一标识editModal_xxx
• 表单中新增隐藏输入框，直接绑定当前行的lec_id，提交时自动将ID传递到后端

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