如何捕获表格单元格的选择事件

要捕获表格单元格的选择事件，您可以使用 JavaScript 和一个轻量级的前端框架，如 React、Vue 或 Angular。以下是一个简化的示例，使用 React.js 捕获表格单元格的选择事件：

首先，确保您已经安装了 Node.js 和 npm。然后在一个新文件夹中创建一个名为 index.js 的文件。
通过终端或命令提示符进入文件夹，并运行 npm init 命令以创建一个新的 npm 项目。
安装 React.js:npm install react react-dom
在 index.js 文件中，导入 React.js，并创建一个简单的表格：

import React, { useState } from 'react';

function Table() {
  const [rows, setRows] = useState([]);

  const handleClick = (row, column) => {
    console.log(`Selected row: ${row.label}`);
    console.log(`Selected column: ${column.label}`);
  };

  const handleDoubleClick = (row, column) => {
    console.log(`Double-clicked row: ${row.label}`);
    console.log(`Double-clicked column: ${column.label}`);
  };

  const handleCellClick = (row, column, event) => {
    console.log(`Cell clicked: ${row.label}`);
    console.log(`Column: ${column.label}`);
    console.log(`Event target: ${event.target.tagName}`);
  };

  const createTable = () => {
    const table = [];
    for (let i = 0; i < 10; i++) {
      const row = [];
      for (let j = 0; j < 10; j++) {
        row.push({ value: i + j });
      }
      table.push(row);
    }
    return table;
  };

  const table = createTable();

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => handleClick(table, 'row')}>Row</th>
          <th onClick={() => handleClick(table, 'column')}>Column</th>
          <th onClick={() => handleDoubleClick(table, 'row')}>Row</th>
          <th onClick={() => handleDoubleClick(table, 'column')}>Column</th>
          <th>Cell</th>
        </tr>
      </thead>
      <tbody>
        {table.map((row, index) => (
          <tr key={index}>
            {row.map((cell, index) => (
              <td
                key={index}
                onClick={(event) => handleCellClick(row, cell, event)}
              >
                {cell.value}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Table;

在 index.html 文件中，引入生成的 HTML 代码并添加到网页中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Component</title>
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>