table表格多级表头且可编辑

要实现一个具有多级表头的可编辑表格，可以使用HTML和JavaScript。以下是一个简单的实现示例：

HTML部分：

<table id="editable-table">
  <thead>
    <tr>
      <th rowspan="2">主题</th>
      <th colspan="2">指标</th>
    </tr>
    <tr>
      <th>指标A</th>
      <th>指标B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>主题1</td>
      <td contenteditable="true">可编辑内容1</td>
      <td contenteditable="true">可编辑内容2</td>
    </tr>
    <!-- 其他行... -->
  </tbody>
</table>

JavaScript部分（用于获取编辑后的数据）：

const table = document.getElementById('editable-table');
const rows = table.getElementsByTagName('tr');
 
const getTableData = () => Array.from(rows).slice(1).map(row =>
  Array.from(row.getElementsByTagName('td')).slice(1).map(cell => cell.textContent)
);
 
// 示例使用
document.getElementById('getDataButton').addEventListener('click', () => {
  const data = getTableData();
  console.log(data);
});

在这个例子中，我们使用了HTML的rowspan和colspan属性来创建多级表头，并使用了contenteditable="true"属性来使单元格可编辑。当用户编辑完毕后，可以通过JavaScript来获取编辑后的数据。