HTML实现form表单数据传递到另一页面table并自动新增行求助

核心逻辑说明 #

你要实现的两个功能属于纯前端跨页面数据共享+动态表格渲染场景，优先用localStorage实现即可，不需要额外依赖后端服务，具体实现步骤如下：

1. 表单页提交逻辑修改 #

首先修改表单提交的JS代码，阻止表单默认跳转行为，将用户输入的年龄、性别数据存入本地缓存后再跳转到结果页，代码示例：

// 替换成你表单的实际ID
const studyForm = document.getElementById('study-form')
studyForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault()

  // 读取用户输入值，替换成你输入框的实际ID/选择器
  const userAge = document.getElementById('age').value
  const userGender = document.querySelector('input[name="gender"]:checked').value

  // 从本地缓存读取已提交的参与者数据，无数据则初始化空数组
  const allParticipants = JSON.parse(localStorage.getItem('studyData') || '[]')
  // 新增当前用户数据
  allParticipants.push({
    age: userAge,
    gender: userGender,
    submitTime: new Date().toLocaleString()
  })
  // 将更新后的数据存回本地缓存
  localStorage.setItem('studyData', JSON.stringify(allParticipants))

  // 跳转到结果页，替换成你结果页的实际路径
  window.location.href = 'result.html'
})

2. 结果页动态渲染表格逻辑 #

结果页加载时直接读取本地缓存的所有参与者数据，遍历生成表格行插入即可，代码示例：

window.addEventListener('load', function() {
  // 读取所有参与者数据
  const allParticipants = JSON.parse(localStorage.getItem('studyData') || '[]')
  // 获取表格的tbody元素，替换成你表格的实际ID
  const tableBody = document.querySelector('#result-table tbody')
  // 清空原有内容避免重复渲染
  tableBody.innerHTML = ''

  // 遍历生成每一行数据
  allParticipants.forEach((item, index) => {
    const newRow = document.createElement('tr')
    newRow.innerHTML = `
      <td>${index + 1}</td>
      <td>${item.age}</td>
      <td>${item.gender}</td>
      <td>${item.submitTime}</td>
    `
    tableBody.appendChild(newRow)
  })
})

常见注意事项 #

• 表单的输入元素要配置正确的ID/name属性，确保JS选择器能匹配到对应的DOM节点，避免读取到空值
• localStorage只能存储字符串格式内容，存取数组/对象时必须搭配JSON.stringify()和JSON.parse()做格式转换，否则会出现数据异常
• 测试阶段需要清空历史提交数据时，在浏览器控制台执行localStorage.removeItem('studyData')即可
• 如果后续需要支持多设备提交、数据永久存储，再对接后端POST/GET接口替换localStorage逻辑即可

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