正文

HTML5表格单页实用源码揭秘：轻松制作美观互动表格，无需翻页！

/0 浏览量
0426

在这个信息爆炸的时代，表格作为一种常见的数据展示方式，已经成为网站和应用程序中不可或缺的部分。而HTML5的出现，为表格的制作提供了更多可能。本文将揭秘一个HTML5表格单页实用源码，帮助您轻松制作美观且互动的表格，无需翻页！

一、HTML5表格单页的优势

相较于传统的分页表格，HTML5表格单页具有以下优势：

  1. 用户体验更佳：无需翻页，用户可以更直观地查看所有数据。
  2. 节省服务器资源：单页表格减少了服务器请求的次数，降低了服务器负载。
  3. 响应式设计：HTML5表格单页支持响应式设计，适应不同设备。

二、HTML5表格单页源码解析

以下是一个HTML5表格单页的源码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5表格单页示例</title>
<style>
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  /* 分页样式 */
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  .pagination a {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
  }
  .pagination a.active {
    background-color: #4CAF50;
    color: white;
  }
</style>
</head>
<body>
<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>
<div class="pagination" id="pagination"></div>

<script>
  // 数据数组
  var data = [
    { name: '张三', age: 20, gender: '男', job: '程序员' },
    { name: '李四', age: 25, gender: '男', job: '产品经理' },
    // ...更多数据
  ];

  // 计算每页显示的数据数量
  var pageSize = 10;
  var totalPages = Math.ceil(data.length / pageSize);

  // 渲染表格数据
  function renderTable(pageIndex) {
    var startIndex = pageIndex * pageSize;
    var endIndex = startIndex + pageSize;
    var tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
    tableBody.innerHTML = '';
    for (var i = startIndex; i < endIndex; i++) {
      if (i >= data.length) break;
      var row = document.createElement('tr');
      row.innerHTML = `<td>${data[i].name}</td><td>${data[i].age}</td><td>${data[i].gender}</td><td>${data[i].job}</td>`;
      tableBody.appendChild(row);
    }
  }

  // 渲染分页
  function renderPagination() {
    var pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    for (var i = 0; i < totalPages; i++) {
      var a = document.createElement('a');
      a.href = '#';
      a.innerText = i + 1;
      if (i === 0) {
        a.classList.add('active');
      }
      a.onclick = function() {
        renderTable(this.innerText - 1);
        changeActivePage(this);
      };
      pagination.appendChild(a);
    }
  }

  // 切换活动分页
  function changeActivePage(element) {
    var active = document.querySelector('.pagination a.active');
    if (active) {
      active.classList.remove('active');
    }
    element.classList.add('active');
  }

  // 初始化
  renderTable(0);
  renderPagination();
</script>
</body>
</html>

三、源码解析

  1. HTML结构：使用<table>标签创建表格，包含表头和表体。表头使用<thead>和<tr>标签，表体使用<tbody>和<tr>标签。
  2. CSS样式：使用CSS设置表格和分页的样式，包括边框、背景色、字体等。
  3. JavaScript逻辑：
    • 数据数组data存储表格数据。
    • pageSize变量定义每页显示的数据数量。
    • totalPages变量计算总页数。
    • renderTable函数根据当前页码渲染表格数据。
    • renderPagination函数渲染分页。
    • changeActivePage函数切换活动分页。

四、总结

通过本文的揭秘，您已经学会了如何制作HTML5表格单页。利用这个源码，您可以轻松地制作出美观、互动的表格，提升用户体验。希望这个教程对您有所帮助！

-- 展开阅读全文 --