js 局部刷新table

// 假设有一个表格，id为'myTable'
function updateTableRow(id, newData) {
    const table = document.getElementById('myTable');
    const rows = table.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        const rowId = rows[i].getAttribute('data-id');
        if (rowId === id) {
            // 更新行数据
            const cells = rows[i].getElementsByTagName('td');
            for (let j = 0; j < cells.length; j++) {
                cells[j].innerText = newData[j];
            }
            break;
        }
    }
}

// 调用示例
updateTableRow('row1', ['新数据1', '新数据2', '新数据3']);

function updateTableRow(id, newData) {
    $('tr[data-id="' + id + '"]').each(function() {
        $(this).find('td').each(function(index) {
            $(this).text(newData[index]);
        });
    });
}

// 调用示例
updateTableRow('row1', ['新数据1', '新数据2', '新数据3']);

import React, { useState, useEffect } from 'react';

function MyTable({ data }) {
    return (
        <table>
            <tbody>
                {data.map(row => (
                    <tr key={row.id}>
                        <td>{row.col1}</td>
                        <td>{row.col2}</td>
                        <td>{row.col3}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

// 在父组件中管理数据状态并传递给MyTable