js页面实现表格

2026-03-15 16:20:16JavaScript

使用原生JavaScript创建表格

在HTML中预留一个容器元素，例如<div id="tableContainer"></div>。

通过JavaScript动态生成表格结构：

// 示例数据
const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];

function createTable(data) {
  const table = document.createElement('table');
  table.border = '1';

  // 创建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 创建表体
  const tbody = document.createElement('tbody');
  data.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  return table;
}

document.getElementById('tableContainer').appendChild(createTable(data));

使用jQuery简化表格创建

引入jQuery库后可以简化DOM操作：

js页面实现表格

$('#tableContainer').append(
  $('<table>').append(
    $('<thead>').append(
      $('<tr>').append(
        Object.keys(data[0]).map(key => 
          $('<th>').text(key)
        )
      )
    ),
    $('<tbody>').append(
      data.map(item => 
        $('<tr>').append(
          Object.values(item).map(value => 
            $('<td>').text(value)
          )
        )
      )
    )
  )
);

使用现代框架（React示例）

在React组件中渲染表格：

function DataTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map(key => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            {Object.values(item).map((value, i) => (
              <td key={i}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

添加表格交互功能

实现排序功能示例：

js页面实现表格

function sortTable(columnIndex) {
  const table = document.querySelector('table');
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));

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

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

使用第三方表格库

推荐使用专业表格库获得更丰富功能：

DataTables（jQuery插件）
Handsontable（支持Excel-like操作）
ag-Grid（企业级表格解决方案）

DataTables基本使用示例：

$('#example').DataTable({
  data: data,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Age", data: "age" }
  ]
});