html-table - React Hooks：在 html 表中添加新行并删除特定行（请问这是不可能的吗？）

Question

当单击添加按钮（在 + 按钮的列单元格内）向 html 表添加新行并单击删除按钮（在 - 按钮的列单元格内）使用反应挂钩从 html 表中删除行。

行添加按钮需要一些列是行跨度，一些列是添加 2 行（如第一张图片）。

请有人可以帮我解决这个问题...谢谢

预期行添加是这样的（点击+按钮的第二列）

我的源代码如下::

import React, {Component, useState} from "react";
import './softwareHaifu.css'
import {Button} from "react-bootstrap";
import {CSVLink} from "react-csv";
import Nav from "./Nav";
import * as Papa from "papaparse";
import csvFile from "./DistributionInfo.csv";
import csvFileIntra from "./INTAconnectionPCInfo.csv";
// import {NavigationBar} from "../../share/components/ope-nav";

export default function SoftwareHaifu() {
    const [softwareList, setSoftwareList] = useState(null);
    const [ipList, setIpList] = useState(null);

    React.useEffect(() => {
        Papa.parse(csvFile, {
            download: true,
            header: true,
            skipEmptyLines: true,
            complete: data => {
                setIpList(data);
                console.log("Ip List is :" +data.data);
            }
        });
    }, []);

    React.useEffect(() => {
        Papa.parse(csvFileIntra, {
            download: true,
            header: true,
            skipEmptyLines: true,
            complete: data => {
                setSoftwareList(data);
                console.log(data.data);
            }
        });
    }, []);

    const handleAdd = () => {
        // Add Row
    };

    const handleDelete = () => {
        // Add Row
    };

        return (
            <div>
                {/*<NavigationBar />*/}
                <Nav />
                <h1>ソフトウェア配布</h1>
                <div id="container">
                    <table id="table">
                        {/*<table id="table" className="table">*/}
                            <thead>
                            <tr>
                                <th>IP Address</th>
                                <th>Area</th>
                                <th>Job</th>
                                <th>Flow</th>
                                <th>Component</th>
                                <th>Current <br/>Version</th>
                                <th>Next <br/>Version</th>
                                <th>Progress</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                        <tbody id="main">
                        <tr className="row-col1">
                            <td rowSpan="2">
                                <div>
                                    <select className="ipadd-ddo">
                                        <option value="" selected={true}>choose</option>
                                        <option value="1" >192.168.0.1:61000</option>
                                        <option value="1">192.168.0.1:62000</option>
                                    </select>
                                </div>
                                <div className="button-area">
                                    <button className='btn-add-row-1 btn-circle btn-add-row' onClick={handleAdd}>＋&lt;/button>
                                    <button className='btn-del-row-1 btn-circle btn-del-row' onClick={handleDelete}>－&lt;/button>
                                </div>
                            </td>
                            <td rowSpan="2" className="button-area">
                                <textarea value="Please input"/>
                                <button className='btn-add-row-1 btn-circle btn-add-row' onClick={handleAdd}>＋&lt;/button>
                                <button className='btn-del-row-1 btn-circle btn-del-row' onClick={handleDelete}>－&lt;/button>
                            </td>
                            <td rowSpan="2" className="button-area">
                                <textarea value="Please input"/>
                                <button className='btn-add-row-1 btn-circle btn-add-row' onClick={handleAdd}>＋&lt;/button>
                                <button className='btn-del-row-1 btn-circle btn-del-row' onClick={handleDelete}>－&lt;/button>
                            </td>
                            <td rowSpan="2">
                                <textarea value="Please input"/>
                            </td>
                            {/*Component*/}
                            <td>
                                <input type="checkbox" className="checkbox-edit" checked={true}/>Edit
                            </td>
                            <td>
                                <label className="current-version"></label>
                            </td>
                            <td>
                                <select className="next-version">
                                    <option value="">Choose</option>
                                </select>
                            </td>
                            <td rowspan="2">
                                <label ></label>
                            </td>
                            <td>
                                <input type="checkbox" className="checkbox-del" disabled="true"/>Delete
                            </td>
                        </tr>
                        <tr className="row-col2">
                            <td>
                                <input type="checkbox" className="checkbox-run"/>Run
                            </td>
                            <td>
                                <label className="current-version"></label>
                            </td>
                            <td>
                                <select className="next-version">
                                    <option value="">Choose</option>
                                </select>
                            </td>
                            <td>
                                <input type="checkbox" className="checkbox-del" disabled="true"/>Delete
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
);
}

标签： html-tablereact-hooksaddreact-table