如何实现点击表格VIEW按钮将对应行数据填充至模态框输入框？

步骤1：PHP渲染表格时为VIEW按钮绑定行数据 #

循环渲染表格行时，把当前行的appoint_id、客户名称、联系方式等数据通过自定义data属性绑定到VIEW按钮上，让点击事件能直接读取这些数据。

示例代码：

<?php
// 假设已从数据库查询到数据，存放在$appointments数组中
foreach ($appointments as $item) {
    echo "<tr>";
    echo "<td>" . htmlspecialchars($item['appoint_id']) . "</td>";
    echo "<td>" . htmlspecialchars($item['customer_name']) . "</td>";
    echo "<td>" . htmlspecialchars($item['phone']) . "</td>";
    // VIEW按钮，用data-*属性存储行数据
    echo "<td><button type='button' class='view-btn' 
            data-appoint-id='".htmlspecialchars($item['appoint_id'], ENT_QUOTES)."'
            data-customer-name='".htmlspecialchars($item['customer_name'], ENT_QUOTES)."'
            data-phone='".htmlspecialchars($item['phone'], ENT_QUOTES)."'
            >VIEW</button></td>";
    echo "</tr>";
}
?>

注：用htmlspecialchars转义特殊字符，避免破坏HTML结构

步骤2：编写JavaScript处理点击事件，填充模态框 #

给所有VIEW按钮绑定点击事件，读取按钮上的data属性值，填充到模态框对应输入框后显示模态框。

假设模态框结构（以Bootstrap为例） #

<div id="addProductModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-group">
          <label>预约ID</label>
          <input type="text" id="appoint_id" class="form-control" readonly>
        </div>
        <div class="form-group">
          <label>客户名称</label>
          <input type="text" id="customer_name" class="form-control" readonly>
        </div>
        <div class="form-group">
          <label>联系方式</label>
          <input type="text" id="phone" class="form-control" readonly>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery实现（新手友好） #

// 绑定点击事件
$('.view-btn').click(function() {
    // 读取按钮上的data属性
    const appointId = $(this).data('appoint-id');
    const customerName = $(this).data('customer-name');
    const phone = $(this).data('phone');
    
    // 填充模态框输入框
    $('#appoint_id').val(appointId);
    $('#customer_name').val(customerName);
    $('#phone').val(phone);
    
    // 显示Bootstrap模态框
    $('#addProductModal').modal('show');
});

原生JavaScript实现（无需依赖库） #

const viewButtons = document.querySelectorAll('.view-btn');
const modal = document.getElementById('addProductModal');

viewButtons.forEach(btn => {
    btn.addEventListener('click', function() {
        // 读取data属性（原生JS中dataset会自动转换驼峰命名）
        const appointId = this.dataset.appointId;
        const customerName = this.dataset.customerName;
        const phone = this.dataset.phone;
        
        // 填充输入框
        document.getElementById('appoint_id').value = appointId;
        document.getElementById('customer_name').value = customerName;
        document.getElementById('phone').value = phone;
        
        // 显示模态框（默认需设置模态框CSS为display:none）
        modal.style.display = 'block';
    });
});

// 点击模态框外部关闭
window.addEventListener('click', function(e) {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});

注意事项 #

• 确保模态框输入框的id和JavaScript中赋值的id完全一致，否则无法填充数据。
• 使用Bootstrap模态框时，需提前引入Bootstrap的CSS和JS文件（Bootstrap 3/4依赖jQuery）。

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