HTML

< input type = " text " id = " searchInput " onkeyup = " searchTable () "
 placeholder = " Search... " >
Javascript:
function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById(" searchInput ");
  filter = input.value.toUpperCase();
  table = document.getElementById(" myTable ");
  tr = table.getElementsByTagName(" tr ");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName(" td ")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase(). indexOf (filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = " none ";
      }
    }
  }
}

在此示例中

页面链接（< a href = " # " >）允许用户导航到不同的页面。
点击页面链接通常会加载一组新的数据或显示内容的不同部分。

排序

排序功能允许用户根据特定列中的值重新排列表格的行。在此示例中，点击列标题可在升序和降序之间切换，具体取决于相应列中的字母或数字值。

以下是使用 JavaScript 对表格行进行排序的示例

HTML

< th onclick = " sortTable(0) " > Name < /th >
< th onclick = "sortTable(1)" > Age < /th >
Javascript:
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

结合这些功能，在处理 HTML 表格中呈现的大型数据集时，可提供更友好的用户体验和交互性。它允许用户高效地导航、搜索和分析所呈现的信息，从而提高网页的整体可用性。

以下是使用 HTML、CSS 和 JavaScript 实现的带分页、搜索和排序功能的 HTML 表格的更全面的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with Pagination, Search, and Sorting</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      cursor: pointer;
    }
    .pagination {
      display: inline-block;
    }
    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
    }
    .pagination a.active {
      background-color: #4CAF50;
      color: white;
    }
    .pagination a:hover:not(.active) {background-color: #ddd;}
  < /style >
< /head >
< body >

<h2>Table with Pagination, Search, and Sorting</h2>
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for names..">

<table id="myTable">
  <thead>
    <tr>
      <th onclick=" sortTable(0) "> Name </th>
      < th onclick=" sortTable(1) "> Age < /th >
    < /tr >
  < /thead >
  < tbody >
    < tr >< td > John < /td > < td > 25 < /td > < /tr >
    < tr >< td > Doe < /td > < td > 30 < /td > < /tr >
    < tr >< td > Smith < /td > < td > 20 < /td >< /tr >
    < ! - - Add more rows as needed - - >
  < /tbody >
< /table >
< div class = " pagination " id = " pagination " >< /div >

<script>
  function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    dir = "asc";
    while (switching) {
      switching = false;
      rows = table.rows;
      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch= true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            shouldSwitch= true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount ++;
      } else {
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  }

  function searchTable() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }

  // Pagination function
  function loadPagination() {
    var table = document.getElementById("myTable");
    var rows = table.rows.length;
    var perPage = 3; // Change this to set number of rows per page
    var pageCount = Math.ceil(rows / perPage);
    var pagination = document.getElementById("pagination");
    var pageLinks = "";
    for (var i = 0; i < pageCount; i++) {
      pageLinks += "<a href='#' onclick='changePage(" + i + ")'>" + (i + 1) + "</a> ";
    }
    pagination.innerHTML = pageLinks;
  }

  function changePage(page) {
    var table = document.getElementById("myTable");
    var rows = table.rows.length;
    var perPage = 3; // Change this to set number of rows per page
    var start = page * perPage + 1;
    var end = start + perPage - 1;
    for (var i = 1; i < rows; i++) {
      if (i >= start && i <= end) {
        table.rows[i].style.display = "";
      } else {
        table.rows[i].style.display = "none";
      }
    }
  }

  // Initializations
  window.onload = function() {
    loadPagination();
    changePage(0); // Show the first page initially
  };
< /script >
< /body >
< /html >

结论

总之，创建带分页、搜索和排序功能的 HTML 表格可提高网页上数据呈现的可用性和可访问性。

HTML 表格：表格提供了一种结构化的数据显示格式，其中行和列定义了布局。
分页：将内容划分为多个页面，通过有效管理大型数据集并缩短页面加载时间来改善用户体验。
搜索功能：允许用户在表格中搜索特定数据可提高可用性和可访问性，特别是对于大型数据集。
排序：使用户能够根据列值对表格行进行排序，有助于数据分析和理解。

通过结合这些功能，Web 开发人员可以创建动态且交互式的表格界面，使用户能够高效地导航、搜索和分析数据。这增强了 Web 应用程序的整体可用性和用户体验。

下一主题HTML 值

带有分页、搜索和排序的 HTML 表格

2024年8月28日 | 阅读 7 分钟

在本主题中，我们了解并实现了创建带分页、搜索和排序功能的 HTML 表格。让我分解每个方面

HTML 表格

HTML 表格用于以表格格式显示数据。它们由行和列组成，每个单元格包含数据或其他 HTML 元素。表格通常用于呈现结构化信息，例如项目列表、数据集或比较图表。

HTML 表格以行和列组织数据。每个单元格可以包含文本、图像、链接或其他 HTML 元素。

以下是 HTML 表格的基本示例

< table >
  < tr >
    < th > Name < /th >
    < th > Age < /th >
  < /tr >
  < tr >
    < td > John < /td >
    < td > 25 < /td >
  < /tr >
  < tr >
    < td > Doe < /td >
    < td > 30 < /td >
  < /tr >
  < ! - - Add more rows as needed - - >
< /table >

在此示例中

< table > 元素定义了表格。
每行（< tr >）包含表格数据单元格（< td >）或表格标题单元格（< th >）。
表格标题（< th >）用于列标题。
表格数据单元格（< td >）包含实际数据。

分页

分页是指将内容划分为单独的页面，以提高可用性和加载时间，尤其是在处理大量数据时。在 HTML 表格的上下文中，分页允许用户浏览表格的不同部分，一次只显示行的子集。这使用户可以在单个页面上获得更多信息。

以下是 HTML 中分页的示例

< div class = " pagination " >
  < a href = " # " > 1 < /a > 
  < a href = " # " > 2 < /a >
  < a href = " # " > 3 < /a >
  < ! - - Add more page links as needed - - >
< /div >

在此示例中

页面链接（< a href = " # " >）允许用户导航到不同的页面。
点击页面链接通常会加载一组新的数据或显示内容的不同部分。

搜索功能

添加搜索功能允许用户根据特定条件过滤表格内容。在提供的示例中，表格上方包含一个搜索输入字段，使用户能够输入搜索词。当用户键入时，表格会动态更新以仅显示与搜索查询匹配的行，从而更轻松地查找相关信息。

以下是带有 JavaScript 的搜索输入字段示例，用于过滤表格行

排序

结论

带有分页、搜索和排序的 HTML 表格

HTML 表格

分页

搜索功能

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

排序

结论

带有分页、搜索和排序的 HTML 表格

HTML 表格

分页

搜索功能

相关帖子

如何使用 Brackets.io 创建简单的网页？（适合初学者）

任何 HTML 文档应有的第一个标签是什么

将 HTML Collection 转换为数组

如何在 HTML 中使用 PHP

HTML code 标签

HTML 自定义属性

Excel 中级测试

网站的 HTML 代码

HTML 中的 hgroup 标签

HTML 图片叠加文本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器