如何通过表格单元格在Firebase中获取特定用户数据？

嘿，作为JavaScript新手能写出这样的代码已经超棒啦！我来帮你搞定点击昵称展示用户全部数据的功能，其实思路很简单——就是在渲染表格的时候把用户的完整数据（或者用户ID）绑定到对应的单元格上，然后给单元格添加点击事件来触发数据展示。

下面是具体的修改方案，我会一步步给你解释：

方案一：直接在元素上存储完整用户数据（高效便捷） #

这种方式适合数据不会频繁变动的场景，渲染时就把用户的所有数据存在单元格的data属性里，点击时直接读取展示：

userRef.on("child_added", snap => {
  // 一次性获取当前用户的全部数据，比多次调用child更简洁
  const userData = snap.val();
  const username = userData.name.name;
  const surname = userData.name.surname;

  // 创建表格单元格，把完整用户数据存在data属性中，同时设置显示的昵称
  const $nameCell = $("<td>")
    .text(`${username} ${surname}`) // 可根据需求只显示username
    .data("userData", userData); // 把用户完整数据绑定到单元格上

  // 创建表格行并添加单元格，再插入到表格中
  const $row = $("<tr>").append($nameCell);
  $("#user_table").append($row);

  // 给单元格添加点击事件，触发时展示用户数据
  $nameCell.on("click", function() {
    // 从data属性中取出绑定的用户数据
    const clickedUser = $(this).data("userData");

    // 示例1：用alert快速展示数据（适合测试）
    let detailText = `用户名：${clickedUser.name.name}\n姓氏：${clickedUser.name.surname}`;
    // 如果用户有其他字段（比如邮箱、年龄），可按需追加
    if (clickedUser.email) detailText += `\n邮箱：${clickedUser.email}`;
    if (clickedUser.age) detailText += `\n年龄：${clickedUser.age}`;
    alert(detailText);

    // 示例2：渲染到页面的详情区域（更友好的UI）
    // 先在HTML中添加容器：<div id="user-detail-container"></div>
    // $("#user-detail-container").html(`
    //   <h3>用户详情</h3>
    //   <p>用户名：${clickedUser.name.name}</p>
    //   <p>姓氏：${clickedUser.name.surname}</p>
    //   ${clickedUser.email ? `<p>邮箱：${clickedUser.email}</p>` : ''}
    //   ${clickedUser.age ? `<p>年龄：${clickedUser.age}</p>` : ''}
    // `);
  });
});

方案二：存储用户ID，点击时从Firebase重新获取数据（适合数据可能更新的场景） #

如果你的用户数据可能在渲染后发生变化，这种方式能保证展示的是最新数据：

userRef.on("child_added", snap => {
  const userData = snap.val();
  const userId = snap.key; // 获取Firebase中该用户节点的唯一ID
  const username = userData.name.name;
  const surname = userData.name.surname;

  const $nameCell = $("<td>")
    .text(`${username} ${surname}`)
    .data("userId", userId); // 只存储用户ID

  const $row = $("<tr>").append($nameCell);
  $("#user_table").append($row);

  $nameCell.on("click", function() {
    const userId = $(this).data("userId");
    // 根据ID从Firebase获取最新的用户数据
    userRef.child(userId).once("value", userSnap => {
      const latestUserData = userSnap.val();
      // 这里同样可以用alert或者页面详情区展示数据，逻辑和方案一一致
      alert(`用户名：${latestUserData.name.name}\n姓氏：${latestUserData.name.surname}`);
    });
  });
});

小提示 #

• 你可以根据UI需求调整数据展示方式，比如用模态框、侧边栏替代alert，体验会更流畅。
• 如果用户数据字段较多，可以封装一个小函数来生成详情HTML，避免重复代码。

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