JavaScript怎么实现生成动态表格和动态效果

发布时间：2022-02-28 09:20:30 作者：iii
来源：亿速云阅读：192

JavaScript怎么实现生成动态表格和动态效果

在现代Web开发中，动态表格和动态效果是常见的需求。无论是展示数据、处理用户输入，还是实现复杂的交互效果，JavaScript都扮演着至关重要的角色。本文将详细介绍如何使用JavaScript生成动态表格，并为其添加各种动态效果。

生成动态表格

1.1 创建表格结构

首先，我们需要在HTML中创建一个表格的基本结构。通常，我们会使用<table>、<thead>、<tbody>、<tr>、<th>和<td>等标签来定义表格。

<table id="dynamicTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态内容将在这里插入 -->
  </tbody>
</table>

1.2 动态添加行和列

接下来，我们使用JavaScript动态地向表格中添加行和列。我们可以通过createElement方法创建新的表格行和单元格，然后将它们插入到表格的<tbody>中。

function addRow() {
  const table = document.getElementById('dynamicTable').getElementsByTagName('tbody')[0];
  const newRow = table.insertRow();

  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  const cell3 = newRow.insertCell(2);
  const cell4 = newRow.insertCell(3);

  cell1.innerHTML = table.rows.length;
  cell2.innerHTML = 'New Name';
  cell3.innerHTML = Math.floor(Math.random() * 100);
  cell4.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
}

function deleteRow(button) {
  const row = button.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

1.3 动态删除行和列

在上面的代码中，我们已经实现了删除行的功能。通过deleteRow函数，我们可以删除用户点击的行。

1.4 动态更新表格内容

有时，我们需要动态更新表格中的内容。我们可以通过遍历表格的行和列，找到需要更新的单元格，并修改其内容。

function updateCell(rowIndex, colIndex, newValue) {
  const table = document.getElementById('dynamicTable');
  const row = table.rows[rowIndex];
  const cell = row.cells[colIndex];
  cell.innerHTML = newValue;
}

添加动态效果

2.1 鼠标悬停效果

我们可以通过CSS和JavaScript为表格添加鼠标悬停效果。例如，当用户将鼠标悬停在某一行上时，改变该行的背景颜色。

#dynamicTable tbody tr:hover {
  background-color: #f5f5f5;
}

2.2 点击效果

我们可以为表格中的某些元素添加点击效果。例如，当用户点击某一行时，高亮显示该行。

function highlightRow(row) {
  const rows = document.querySelectorAll('#dynamicTable tbody tr');
  rows.forEach(r => r.classList.remove('highlight'));
  row.classList.add('highlight');
}

document.querySelectorAll('#dynamicTable tbody tr').forEach(row => {
  row.addEventListener('click', () => highlightRow(row));
});

2.3 排序功能

我们可以为表格添加排序功能。例如，当用户点击表头时，按照该列的内容对表格进行排序。

function sortTable(columnIndex) {
  const table = document.getElementById('dynamicTable');
  const tbody = table.getElementsByTagName('tbody')[0];
  const rows = Array.from(tbody.getElementsByTagName('tr'));

  rows.sort((a, b) => {
    const aValue = a.cells[columnIndex].textContent;
    const bValue = b.cells[columnIndex].textContent;
    return aValue.localeCompare(bValue);
  });

  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  rows.forEach(row => tbody.appendChild(row));
}

document.querySelectorAll('#dynamicTable th').forEach((th, index) => {
  th.addEventListener('click', () => sortTable(index));
});

2.4 过滤功能

我们可以为表格添加过滤功能。例如，当用户在输入框中输入内容时，只显示包含该内容的行。

function filterTable() {
  const input = document.getElementById('filterInput');
  const filter = input.value.toUpperCase();
  const table = document.getElementById('dynamicTable');
  const rows = table.getElementsByTagName('tr');

  for (let i = 1; i < rows.length; i++) {
    const row = rows[i];
    const cells = row.getElementsByTagName('td');
    let shouldDisplay = false;

    for (let j = 0; j < cells.length; j++) {
      const cell = cells[j];
      if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
        shouldDisplay = true;
        break;
      }
    }

    row.style.display = shouldDisplay ? '' : 'none';
  }
}

document.getElementById('filterInput').addEventListener('input', filterTable);

2.5 分页功能

对于包含大量数据的表格，我们可以添加分页功能。例如，每页显示10行数据，并提供“上一页”和“下一页”按钮。

let currentPage = 1;
const rowsPerPage = 10;

function showPage(page) {
  const table = document.getElementById('dynamicTable');
  const rows = table.getElementsByTagName('tr');

  for (let i = 1; i < rows.length; i++) {
    rows[i].style.display = (i > (page - 1) * rowsPerPage && i <= page * rowsPerPage) ? '' : 'none';
  }
}

function nextPage() {
  const table = document.getElementById('dynamicTable');
  const rows = table.getElementsByTagName('tr');
  const totalPages = Math.ceil((rows.length - 1) / rowsPerPage);

  if (currentPage < totalPages) {
    currentPage++;
    showPage(currentPage);
  }
}

function previousPage() {
  if (currentPage > 1) {
    currentPage--;
    showPage(currentPage);
  }
}

document.getElementById('nextPage').addEventListener('click', nextPage);
document.getElementById('previousPage').addEventListener('click', previousPage);

showPage(currentPage);

综合示例

以下是一个综合了上述所有功能的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Table</title>
  <style>
    #dynamicTable tbody tr:hover {
      background-color: #f5f5f5;
    }
    .highlight {
      background-color: #ffcccb;
    }
  </style>
</head>
<body>
  <input type="text" id="filterInput" placeholder="Filter...">
  <button onclick="addRow()">Add Row</button>
  <button id="previousPage">Previous</button>
  <button id="nextPage">Next</button>
  <table id="dynamicTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态内容将在这里插入 -->
    </tbody>
  </table>

  <script>
    function addRow() {
      const table = document.getElementById('dynamicTable').getElementsByTagName('tbody')[0];
      const newRow = table.insertRow();

      const cell1 = newRow.insertCell(0);
      const cell2 = newRow.insertCell(1);
      const cell3 = newRow.insertCell(2);
      const cell4 = newRow.insertCell(3);

      cell1.innerHTML = table.rows.length;
      cell2.innerHTML = 'New Name';
      cell3.innerHTML = Math.floor(Math.random() * 100);
      cell4.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
    }

    function deleteRow(button) {
      const row = button.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }

    function highlightRow(row) {
      const rows = document.querySelectorAll('#dynamicTable tbody tr');
      rows.forEach(r => r.classList.remove('highlight'));
      row.classList.add('highlight');
    }

    document.querySelectorAll('#dynamicTable tbody tr').forEach(row => {
      row.addEventListener('click', () => highlightRow(row));
    });

    function sortTable(columnIndex) {
      const table = document.getElementById('dynamicTable');
      const tbody = table.getElementsByTagName('tbody')[0];
      const rows = Array.from(tbody.getElementsByTagName('tr'));

      rows.sort((a, b) => {
        const aValue = a.cells[columnIndex].textContent;
        const bValue = b.cells[columnIndex].textContent;
        return aValue.localeCompare(bValue);
      });

      while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
      }

      rows.forEach(row => tbody.appendChild(row));
    }

    document.querySelectorAll('#dynamicTable th').forEach((th, index) => {
      th.addEventListener('click', () => sortTable(index));
    });

    function filterTable() {
      const input = document.getElementById('filterInput');
      const filter = input.value.toUpperCase();
      const table = document.getElementById('dynamicTable');
      const rows = table.getElementsByTagName('tr');

      for (let i = 1; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let shouldDisplay = false;

        for (let j = 0; j < cells.length; j++) {
          const cell = cells[j];
          if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
            shouldDisplay = true;
            break;
          }
        }

        row.style.display = shouldDisplay ? '' : 'none';
      }
    }

    document.getElementById('filterInput').addEventListener('input', filterTable);

    let currentPage = 1;
    const rowsPerPage = 10;

    function showPage(page) {
      const table = document.getElementById('dynamicTable');
      const rows = table.getElementsByTagName('tr');

      for (let i = 1; i < rows.length; i++) {
        rows[i].style.display = (i > (page - 1) * rowsPerPage && i <= page * rowsPerPage) ? '' : 'none';
      }
    }

    function nextPage() {
      const table = document.getElementById('dynamicTable');
      const rows = table.getElementsByTagName('tr');
      const totalPages = Math.ceil((rows.length - 1) / rowsPerPage);

      if (currentPage < totalPages) {
        currentPage++;
        showPage(currentPage);
      }
    }

    function previousPage() {
      if (currentPage > 1) {
        currentPage--;
        showPage(currentPage);
      }
    }

    document.getElementById('nextPage').addEventListener('click', nextPage);
    document.getElementById('previousPage').addEventListener('click', previousPage);

    showPage(currentPage);
  </script>
</body>
</html>

总结

通过本文的介绍，我们学习了如何使用JavaScript生成动态表格，并为其添加各种动态效果。从创建表格结构、动态添加和删除行，到实现排序、过滤和分页功能，JavaScript为我们提供了强大的工具来处理表格数据。希望本文能帮助你在实际项目中更好地应用这些技术。

JavaScript怎么实现生成动态表格和动态效果

JavaScript怎么实现生成动态表格和动态效果

目录

生成动态表格

1.1 创建表格结构

1.2 动态添加行和列

1.3 动态删除行和列

1.4 动态更新表格内容

添加动态效果

2.1 鼠标悬停效果

2.2 点击效果

2.3 排序功能

2.4 过滤功能

2.5 分页功能

综合示例

总结

相关阅读