动态创建表格及对表格的操作

import React, { useEffect } from 'react';

const Table = ({ rows, columns }) => {
    // 生成表格行
    const tableRows = [];

    for (let i = 0; i < rows + 1; i++) {
        // 生成表格单元格
        const tableCells = [];
        for (let j = 0; j < columns + 1; j++) {
            tableCells.push(
                <td
                    key={j}
                    style={{
                        width: 29.7,
                        height: 29.7,
                        border: '1px solid rgb(95, 149, 255)',
                        backgroundColor: 'rgba(238, 248, 250,0.5)'
                    }}> </td>
            );
        }
        // 添加表格行到数组
        tableRows.push(
            <tr key={i}>
                {tableCells}
            </tr>
        );
    }

    return (
        <table id='tableId'>
            <tbody>
                {tableRows}
            </tbody>
        </table>
    );

}



const TableCom: React.FC<{ node: Node }> = ({ node }) => {
    const rows = 3; // 设置行数
    const columns = 4; // 设置列数
    useEffect(() => {
        // 获取表格元素
        const table = document.getElementById('tableId') as HTMLTableElement;
        // 获取第一行的第一个单元格
        const firstCell = table?.rows[0].cells[0];
        // 对第一个单元格进行操作
        // 例如，设置宽度和高度样式
        firstCell.style.width = '35px';
        firstCell.style.height = '35px';

        // 获取所有的 <td> 元素
        const cells = document.getElementsByTagName('td');
        // 为每个 <td> 元素添加点击事件监听器
        for (let i = 0; i < cells.length; i++) {
            cells[i].addEventListener('click', (elem) => {
                // 获取所点击的 <td> 元素
                const clickedCell = cells[i];
                // 获取所点击的 <td> 元素所在的行和列
                const row = clickedCell.parentNode?.rowIndex;
                const column = clickedCell.cellIndex;
                // 输出行和列的索引（从0开始）
                console.log(row, column);
            });
        }
    }, [])

    return (
        <div>
            <Table rows={rows} columns={columns} />
        </div>
    );
}

export default TableCom;