当前位置：首页 > JavaScript

js代码实现表格

2026-02-03 07:33:51JavaScript

以下是一个使用JavaScript动态创建和操作HTML表格的示例代码及说明：

基础表格创建

通过DOM操作生成一个简单的2x2表格并插入到页面中：

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

// 创建表头
const thead = table.createTHead();
const headerRow = thead.insertRow();
headerRow.insertCell(0).textContent = 'Header 1';
headerRow.insertCell(1).textContent = 'Header 2';

// 创建表格内容
const tbody = table.createTBody();
const dataRow = tbody.insertRow();
dataRow.insertCell(0).textContent = 'Data 1';
dataRow.insertCell(1).textContent = 'Data 2';

// 添加到DOM
document.body.appendChild(table);

动态数据填充

根据数组数据动态生成表格内容：

const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

function createTableFromData(dataArray) {
  const table = document.createElement('table');
  const headers = Object.keys(dataArray[0]);

  // 创建表头
  const headerRow = table.insertRow();
  headers.forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
  });

  // 填充数据
  dataArray.forEach(item => {
    const row = table.insertRow();
    headers.forEach(header => {
      row.insertCell().textContent = item[header];
    });
  });

  return table;
}

document.body.appendChild(createTableFromData(data));

表格排序功能

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

function makeSortable(table) {
  const headers = table.querySelectorAll('th');
  headers.forEach((header, index) => {
    header.style.cursor = 'pointer';
    header.addEventListener('click', () => {
      const tbody = table.querySelector('tbody');
      const rows = Array.from(tbody.querySelectorAll('tr'));

      rows.sort((a, b) => {
        const aText = a.cells[index].textContent;
        const bText = b.cells[index].textContent;
        return aText.localeCompare(bText);
      });

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

const table = createTableFromData(data);
makeSortable(table);
document.body.appendChild(table);

响应式表格

使用事件委托实现动态行操作：

table.addEventListener('click', (e) => {
  if (e.target.tagName === 'TD') {
    e.target.style.backgroundColor = '#eee';
  }
});

// 添加删除行功能
table.addEventListener('dblclick', (e) => {
  if (e.target.tagName === 'TD') {
    e.target.parentElement.remove();
  }
});

使用模板字符串

快速生成表格HTML字符串：

function generateTableHTML(data) {
  return `
    <table border="1">
      <thead>
        <tr>
          ${Object.keys(data[0]).map(key => `<th>${key}</th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${data.map(row => `
          <tr>
            ${Object.values(row).map(val => `<td>${val}</td>`).join('')}
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;
}

document.body.innerHTML = generateTableHTML(data);

这些示例展示了从基础创建到高级功能的JavaScript表格实现方法，可根据实际需求组合使用或扩展。

js代码实现表格