如何根据上一页的表格点击内容动态修改下一页标题

两个独立HTML页面的JS运行环境是完全隔离的，没法直接把上一个页面的变量传给下一个页面，要实现传值必须借助浏览器自带的跨页通信机制。下面两个方案都和你现在已经写好的点击跳转逻辑完全适配，纯原生JS就能跑，没有额外学习成本。

方案1：URL查询参数传值（适配现有跳转代码最快） #

这个方案不需要改动你已经写好的页面结构，只需要把跳转链接拼上要传的参数就行：

• 第一页的点击事件回调里，先拿到当前点击的.tab表格内部、对应.name类单元格的文本内容
• 把拿到的文本作为查询参数拼到跳转链接后面，正常触发跳转
• 第二页加载时，从当前地址栏解析出传过来的参数，直接赋值给标题元素的文本内容就行

对应的第一页参考代码：

// 你已经写好的遍历所有tab的循环
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', (e) => {
    // 注意：一定要在当前点击的tab元素内部找name单元格，不然永远取到页面上第一个name的内容
    const targetName = e.currentTarget.querySelector('.name').textContent.trim()
    // 拼带参数的跳转链接，用encodeURIComponent包裹文本，避免特殊字符导致链接解析错误
    location.href = `headingpage.html?username=${encodeURIComponent(targetName)}`
  })
})

对应的第二页参考代码：

// 等页面DOM完全加载后再执行，避免找不到标题元素报错
window.addEventListener('DOMContentLoaded', () => {
  // 解析地址栏的查询参数
  const searchParams = new URLSearchParams(location.search)
  const passedName = searchParams.get('username')
  // 把取到的内容赋值给标题，加个兜底值避免参数缺失时显示空白
  document.querySelector('h1').textContent = passedName || '未获取到有效数据'
})

这个方案的特点是逻辑最直接，不需要额外的存储操作，缺点是传递的内容会直接显示在地址栏，不适合传敏感内容，也不适合传过长的文本。

方案2：sessionStorage临时存储传值（内容不暴露在地址栏） #

如果不想让传的姓名显示在地址栏，可以用浏览器自带的会话存储机制，整个存储周期只对当前标签页有效，标签页关闭后存储内容会自动清除，不会留长期缓存：

• 第一页点击表格时，先把要传的姓名文本存在sessionStorage里，再正常触发跳转
• 第二页加载时，从sessionStorage里取出之前存的姓名，赋值给标题元素

对应的第一页参考代码：

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', (e) => {
    const targetName = e.currentTarget.querySelector('.name').textContent.trim()
    // 用固定的key把要传的内容存起来
    sessionStorage.setItem('currentClickedUserName', targetName)
    // 正常跳转就行，不需要拼参数
    location.href = 'headingpage.html'
  })
})

对应的第二页参考代码：

window.addEventListener('DOMContentLoaded', () => {
  const passedName = sessionStorage.getItem('currentClickedUserName')
  document.querySelector('h1').textContent = passedName || '未获取到有效数据'
})

新手容易踩的坑 #

• 取.name单元格时，不要直接全局查询.name元素，一定要在当前点击的.tab元素内部查找，不然不管点哪个表格，拿到的都是页面上第一个出现的.name单元格的内容
• 给标题赋值文本时，优先用textContent而不是innerHTML，避免单元格里有嵌套标签时把HTML结构直接渲染到页面上
• 第二页的JS一定要等DOM加载完成后再执行查找元素的操作，不然脚本运行时标题元素还没被浏览器解析出来，会直接报错

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