js实现类似excel表格

<div id="excel-like-table">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- 更多列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 行将在这里动态生成 -->
    </tbody>
  </table>
</div>

// 假设我们有以下数据
const data = [
  { col1: 'A1', col2: 'B1' },
  { col1: 'A2', col2: 'B2' },
  // 更多数据
];

const tableBody = document.querySelector('#excel-like-table tbody');

// 渲染表格
function renderTable() {
  tableBody.innerHTML = '';
  data.forEach((row, rowIndex) => {
    const tr = document.createElement('tr');
    Object.values(row).forEach((cell, colIndex) => {
      const td = document.createElement('td');
      td.textContent = cell;
      td.contentEditable = true; // 允许编辑
      td.addEventListener('input', (event) => {
        data[rowIndex][`col${colIndex + 1}`] = event.target.textContent;
      });
      tr.appendChild(td);
    });
    tableBody.appendChild(tr);
  });
}

// 初始渲染
renderTable();