登录
首页 >  文章 >  前端

JSON数据列表展示与点击展开方法

时间：2026-03-20 15:39:39 310浏览 收藏

本文介绍了一种简洁高效、纯前端实现的JSON数据展示方案：页面初始仅以列表形式呈现人员姓名，用户点击任一姓名后，即可在居中弹出的模态框中查看其完整信息（包括姓名、电话、邮箱），并支持一键关闭；整个流程完全基于原生JavaScript，通过数据绑定、事件委托和语义化DOM操作实现高可维护性与良好性能，无需后端参与，特别适合静态站点或轻量级管理界面的数据展示需求。

如何在网页中实现 JSON 数据的列表展示与点击展开详情功能

本文介绍一种轻量、可维护的前端方案：通过 JavaScript 动态加载 JSON 文件，初始仅渲染人员姓名列表；点击任一姓名后，在页面中模态式展示该人员的完整信息（含姓名、电话、邮箱），并支持一键关闭。全程无需后端 PHP 参与，纯前端即可完成。

本文介绍一种轻量、可维护的前端方案：通过 JavaScript 动态加载 JSON 文件，初始仅渲染人员姓名列表；点击任一姓名后，在页面中模态式展示该人员的完整信息（含姓名、电话、邮箱），并支持一键关闭。全程无需后端 PHP 参与，纯前端即可完成。

在构建数据驱动的静态管理界面时，常需在有限空间内平衡信息密度与用户体验——例如先以简洁列表呈现人员姓名，再按需展开详细资料。本文提供一套结构清晰、无框架依赖的原生 JavaScript 实现方案，核心在于数据绑定与事件委托的合理运用。

✅ 关键设计思路

  • 数据挂载而非重复查询：不再在 showDetails() 中尝试访问外部 data 或使用未定义变量（如原代码中的 i 和 data.personen[i]），而是将每条人员对象直接附加到对应
  • 元素上（li.personData = person）。点击时通过 e.target.personData 即可安全获取上下文数据。
  • 事件委托提升性能：为整个
      绑定单个点击监听器，而非为每个
    1. 单独添加（避免内存泄漏与性能损耗）。通过 e.target.nodeName === 'LI' 判断触发源，确保仅响应有效点击。
    2. 视图容器语义化隔离：所有动态内容统一注入
      ，避免污染 或其他布局区域，便于样式控制与后续扩展。

? 完整实现代码

HTML 结构（精简版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>人员信息管理</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header><h1>人员信息管理</h1></header>
  <main class="view"></main>
  <script src="script.js"></script>
</body>
</html>

JavaScript 逻辑（script.js）

// 加载并渲染人员列表
fetch('data.json')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return res.json();
  })
  .then(data => createListContact(data))
  .catch(err => console.error('数据加载失败:', err));

function createListContact(data) {
  const mainView = document.querySelector('main.view');
  mainView.innerHTML = ''; // 清空旧内容

  const ol = document.createElement('ol');
  ol.classList.add('list-view');
  ol.addEventListener('click', showDetails); // 事件委托

  data.personen.forEach((person, index) => {
    const li = document.createElement('li');
    li.classList.add('button');
    li.id = `person-${index}`;
    li.textContent = `Name: ${person.nachname}, ${person.vorname}`;
    li.personData = person; // ✅ 关键：将数据绑定到 DOM 节点
    ol.appendChild(li);
  });

  mainView.appendChild(ol);
}

function showDetails(e) {
  if (e.target.nodeName !== 'LI') return;

  const { personData } = e.target;
  const details = document.createElement('div');
  details.className = 'details';
  details.id = 'person-details';

  // 构建详情内容（注意：实际字段名需与 JSON 一致，如 telefonnummer/email）
  const info = document.createElement('div');
  info.className = 'detail-content';
  info.innerHTML = `
    <h2>${personData.nachname}, ${personData.vorname}</h2>
    <p><strong>电话：</strong>${personData.telefonnummer || '未提供'}</p>
    <p><strong>邮箱：</strong>${personData.email || '未提供'}</p>
  `;

  const closeBtn = document.createElement('button');
  closeBtn.type = 'button';
  closeBtn.className = 'close-btn';
  closeBtn.textContent = '×';
  closeBtn.addEventListener('click', () => details.remove());

  details.append(info, closeBtn);
  document.body.appendChild(details);
}

CSS 样式增强（style.css 片段）

/* 详情弹窗基础样式 */
.details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
  text-align: left;
}

.detail-content h2 {
  margin-top: 0;
  color: #2c3e50;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7f8c8d;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #ecf0f1;
  color: #e74c3c;
}

/* 列表项悬停反馈 */
.list-view .button {
  padding: 0.6rem 1rem;
  margin: 0.25rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.list-view .button:hover {
  background-color: #3498db;
  color: white;
}

⚠️ 注意事项与最佳实践

  • JSON 字段一致性：确保 data.json 中人员对象包含 nachname、vorname、telefonnummer、email 字段（或按实际结构调整 showDetails 中的属性访问）。
  • 错误处理不可省略：示例中已加入 fetch 状态校验，生产环境建议补充网络异常、JSON 解析失败等兜底逻辑。
  • 无障碍访问优化：可为
  • 添加 role="button" 与 tabindex="0"，并监听 Enter/Space 键触发详情展示，提升键盘用户友好性。
  • 内存与性能：关闭详情页时使用 details.remove()（现代写法）替代 parentNode.removeChild()，更简洁且自动解绑事件监听器（若无额外绑定）。
  • 扩展性提示：如需支持“返回列表”按钮、键盘导航（←→）、或动画过渡效果，可在 .details 上添加 CSS transition 并配合 opacity/scale 控制显隐。

该方案以最小侵入性达成需求目标，代码可读性强、调试直观，是中小型静态数据展示场景的理想选择。

今天关于《JSON数据列表展示与点击展开方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>