js实现表

以下是JavaScript实现表格的几种常见方法，可根据需求选择适合的方式：

动态创建表格（DOM操作）

使用DOM API动态生成表格结构，适合需要灵活操作表格内容的场景：

// 创建table元素
const table = document.createElement('table');
table.border = '1';

// 创建表头
const thead = table.createTHead();
const headerRow = thead.insertRow();
['姓名', '年龄', '城市'].forEach(text => {
  const th = document.createElement('th');
  th.textContent = text;
  headerRow.appendChild(th);
});

// 添加数据行
const tbody = table.createTBody();
const data = [
  ['张三', 25, '北京'],
  ['李四', 30, '上海']
];

data.forEach(rowData => {
  const row = tbody.insertRow();
  rowData.forEach(cellData => {
    const cell = row.insertCell();
    cell.textContent = cellData;
  });
});

// 插入到页面
document.body.appendChild(table);

模板字符串生成

使用模板字符串快速生成HTML结构，适合简单表格：

const data = [
  { name: '王五', age: 28, city: '广州' },
  { name: '赵六', age: 35, city: '深圳' }
];

const tableHTML = `
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      ${data.map(row => `
        <tr>
          <td>${row.name}</td>
          <td>${row.age}</td>
          <td>${row.city}</td>
        </tr>
      `).join('')}
    </tbody>
  </table>
`;

document.body.innerHTML = tableHTML;

使用框架（React示例）

在React中创建可复用的表格组件：

function Table({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>{item.city}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 使用示例
const tableData = [
  { name: '钱七', age: 22, city: '杭州' },
  { name: '孙八', age: 40, city: '南京' }
];

ReactDOM.render(
  <Table data={tableData} />,
  document.getElementById('root')
);

表格排序功能实现

为表格添加点击表头排序的功能：

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 aText = a.cells[columnIndex].textContent;
    const bText = b.cells[columnIndex].textContent;
    return isNaN(aText) ? aText.localeCompare(bText) : aText - bText;
  });

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

// 给表头添加点击事件
document.querySelectorAll('th').forEach((th, index) => {
  th.style.cursor = 'pointer';
  th.addEventListener('click', () => sortTable(index));
});

响应式表格处理

针对移动端优化表格显示：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}