如何使用JavaScript实现表格数据的筛选、排序和导出？

表格数据的筛选

使用JavaScript实现表格数据的筛选，需要先获取到表格元素，然后根据用户的输入值进行匹配筛选，最后将符合条件的行显示出来，其他行隐藏即可。

下面是一个简单的示例代码：

const input = document.getElementById('input');
const table = document.getElementById('table');
const rows = table.getElementsByTagName('tr');

input.addEventListener('keyup', function() {
  const value = this.value.toLowerCase();

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

    for (let j = 0; j < cells.length; j++) {
      const cell = cells[j];

      if (cell.textContent.toLowerCase().indexOf(value) !== -1) {
        found = true;
        break;
      }
    }

    if (found) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

表格数据的排序

表格数据的排序可以通过点击表头来实现，点击表头时，获取到当前表头列的索引，然后根据该索引对表格行进行排序，最后将排序后的行重新插入到表格中即可。

下面是一个简单的示例代码：

const table = document.getElementById('table');
const rows = table.getElementsByTagName('tr');
const headers = table.getElementsByTagName('th');

for (let i = 0; i < headers.length; i++) {
  headers[i].addEventListener('click', function() {
    const index = this.cellIndex;
    const sortDirection = this.dataset.sort || 'asc';
    const newSortDirection = sortDirection === 'asc' ? 'desc' : 'asc';

    for (let j = 0; j < rows.length - 1; j++) {
      const row = rows[j];
      const nextRow = rows[j + 1];
      const value = row.getElementsByTagName('td')[index].textContent;
      const nextValue = nextRow.getElementsByTagName('td')[index].textContent;

      if (sortDirection === 'asc' && value > nextValue || sortDirection === 'desc' && value < nextValue) {
        table.insertBefore(nextRow, row);
        j = -1;
      }
    }

    this.dataset.sort = newSortDirection;
  });
}

表格数据的导出

表格数据的导出可以通过将表格数据转换为CSV格式，然后生成一个CSV文件供用户下载。

下面是一个简单的示例代码：

const table = document.getElementById('table');
const rows = table.getElementsByTagName('tr');

let csvContent = '';

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

  for (let j = 0; j < cells.length; j++) {
    row += cells[j].textContent + ',';
  }

  csvContent += row.slice(0, -1) + '\n';
}

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'table.csv');
link.style.display = 'none';
document.body.appendChild(link);
link.click();