用js写一个实时编辑的表格

好的，以下是一个简单的实时编辑的表格的示例代码，您可以参考一下：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">张三</td>
      <td contenteditable="true">25</td>
      <td contenteditable="true">男</td>
    </tr>
    <tr>
      <td contenteditable="true">李四</td>
      <td contenteditable="true">30</td>
      <td contenteditable="true">男</td>
    </tr>
    <tr>
      <td contenteditable="true">王五</td>
      <td contenteditable="true">28</td>
      <td contenteditable="true">女</td>
    </tr>
  </tbody>
</table>

JS代码：

const table = document.getElementById('myTable');
const cells = table.getElementsByTagName('td');

for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener('input', function() {
    const row = this.parentNode.rowIndex;
    const col = this.cellIndex;
    const value = this.innerHTML;
    console.log(`编辑了第${row}行第${col}列，新值为${value}`);
  });
}

说明：

1. 我们使用HTML表格元素创建了一个表格，其中每个单元格都添加了`contenteditable="true"`属性，以便用户可以编辑单元格内容。

2. 通过JavaScript获取到表格和所有单元格，然后为每个单元格添加`input`事件监听器。当单元格内容发生改变时，会触发`input`事件，并执行事件处理函数。

3. 事件处理函数中，通过`this`关键字获取到当前单元格对象。利用`parentNode`属性获取到单元格所在的行对象，再利用`rowIndex`和`cellIndex`属性获取到单元格所在行和列的索引。最后获取到单元格的新值，并输出到控制台。

这样，当用户编辑表格中的单元格时，就会实时输出相关信息到控制台。您可以根据需求修改事件处理函数中的逻辑，实现您自己的实时编辑表格功能。