点击编辑按钮自动填充对应表单数据的实现需求及代码求助

我来帮你搞定这个编辑填充表单的问题！核心思路是给每一行的编辑按钮绑定对应的数据，点击时用JavaScript把这些数据塞到表单的输入框里。咱们一步步来：

首先，在你的PHP列表代码里，给每一行添加一个编辑按钮，并且用HTML的data-*属性把当前行的lead_name、phone_number、email这些数据存进去，这样点击的时候就能轻松拿到这些值了。注意要用htmlspecialchars()处理数据，防止特殊字符破坏HTML结构或者引发XSS风险：

<div class="row">
  <div class="col-sm-9">
    <b>Leader Name : </b><?php echo($row["lead_name"]); ?><br>
    <b>Phone Number : </b><?php echo($row["phone_number"]); ?><br>
    <b>Email : </b><?php echo($row["email"]); ?><br>
    <!-- 新增编辑按钮，用data属性存储当前行的所有需要编辑的数据 -->
    <button class="edit-btn" 
            data-lead-name="<?php echo htmlspecialchars($row["lead_name"]); ?>"
            data-phone="<?php echo htmlspecialchars($row["phone_number"]); ?>"
            data-email="<?php echo htmlspecialchars($row["email"]); ?>"
            data-record-id="<?php echo $row["id"]; ?>">
      编辑
    </button>
  </div>
</div>

假设你的表单是类似这样的结构（如果你的表单ID或输入框ID不同，对应调整即可）：

<form id="edit-form">
  <!-- 隐藏字段存储要编辑的记录ID，后端需要它来识别修改哪条数据 -->
  <input type="hidden" id="record_id" name="record_id">
  
  <div class="form-group">
    <label>Leader Name:</label>
    <input type="text" id="lead_name" name="lead_name" class="form-control">
  </div>
  <div class="form-group">
    <label>Phone Number:</label>
    <input type="text" id="phone_number" name="phone_number" class="form-control">
  </div>
  <div class="form-group">
    <label>Email:</label>
    <input type="email" id="email" name="email" class="form-control">
  </div>
  
  <button type="submit" class="btn btn-primary">保存修改</button>
</form>

最后写一段原生JavaScript代码，监听所有编辑按钮的点击事件，把数据填充到表单对应的输入框里：

// 给所有带.edit-btn类的按钮绑定点击事件
document.querySelectorAll('.edit-btn').forEach(button => {
  button.addEventListener('click', function() {
    // 从按钮的data属性中提取对应数据
    const recordId = this.dataset.recordId;
    const leadName = this.dataset.leadName;
    const phoneNumber = this.dataset.phone;
    const email = this.dataset.email;
    
    // 将数据填充到表单的对应字段中
    document.getElementById('record_id').value = recordId;
    document.getElementById('lead_name').value = leadName;
    document.getElementById('phone_number').value = phoneNumber;
    document.getElementById('email').value = email;
    
    // 可选：自动滚动到表单位置，提升用户体验
    document.getElementById('edit-form').scrollIntoView({ behavior: 'smooth' });
  });
});

这样设置之后，点击任意一行的编辑按钮，表单就会自动填充好对应的数据啦！如果你的表单还有其他字段，只需要在按钮的data属性里添加对应字段，然后在JS里补充赋值逻辑就行。

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