首先，在HTML中创建一个表格，每个单元格都有一个“编辑”按钮：

  

    

      
名称
      
图像
      
描述
      
选项
    
  
  

    

      
产品1
      

      
这是产品1的描述
      
编辑
    
    

      
产品2
      

      
这是产品2的描述
      
编辑
    
    
  

接着，在JavaScript中添加一个事件监听器，当点击“编辑”按钮时，弹出一个模态框，显示表格行的当前值，并允许用户更新它们：

const editButtons = document.querySelectorAll('.edit-btn');

editButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    event.preventDefault();

    const productId = event.target.getAttribute('data-id');
    const row = event.target.parentElement.parentElement;

    const name = row.cells[0].innerText;
    const image = row.cells[1].querySelector('img').getAttribute('src');
    const description = row.cells[2].innerText;

    // 弹出模态框
    const modal = document.createElement('div');
    modal.classList.add('modal');

    modal.innerHTML = `
      

        名称:
        

        图像:
        

        描述:
        

        保存
      
    `;

    const form = modal.querySelector('form');
    form.addEventListener('submit', (event) => {
      event.preventDefault();

      const updatedName = form.querySelector('#name').value;
      const updatedImage = form.querySelector('#image').value;
      const updatedDescription = form.querySelector('#description').value;

      // 发送Ajax请求更新数据库