Google Apps Script网页应用：双击表格行自动填充表单问题求助

1. 给双击行事件添加数据传递逻辑 #

你的核心问题是双击行时未将对应数据传递到表单页面。修改前端表格的双击事件，提取当前行的数据并通过URL参数传给表单页面：

// 给表格所有行绑定双击事件（假设表格为动态渲染）
document.querySelectorAll('table tr').forEach(row => {
  row.addEventListener('dblclick', function() {
    // 提取当前行所有单元格的文本内容
    const rowData = Array.from(this.cells).map(cell => cell.textContent.trim());
    // 序列化数据并拼接到表单页面URL后
    const encodedData = encodeURIComponent(JSON.stringify(rowData));
    window.open(`form.html?rowData=${encodedData}`, '_blank');
  });
});

2. 表单页面接收数据并填充 #

在表单页面的JS中，读取URL参数里的数据，对应填充到输入框：

window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search);
  const rowData = JSON.parse(decodeURIComponent(params.get('rowData')));
  
  // 根据你的表单输入框ID对应赋值，示例假设输入框id依次为field1、field2...
  document.getElementById('field1').value = rowData[0];
  document.getElementById('field2').value = rowData[1];
  document.getElementById('field3').value = rowData[2];
  // 按实际表单字段数量继续添加赋值逻辑
});

优化建议 #

• 若不想用URL参数，可将表单做成页面内的模态框，双击时直接把数据传给模态框的填充函数，体验更流畅
• 建议用键值对形式传递数据（比如把行数据转成{name: 'xxx', email: 'xxx'}的对象），这样即使列顺序变化，也不会影响填充，示例：

  // 提取数据时用键值对
  const rowData = {
    name: this.cells[0].textContent.trim(),
    email: this.cells[1].textContent.trim()
  };
  // 表单页面赋值
  document.getElementById('name').value = rowData.name;
  document.getElementById('email').value = rowData.email;
  

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