如何制作子表 of parent table ?

Question

我知道也许这个问题可能让你困惑，但我会尝试更详细地解释。

第一：我有这个api

   {
    "data": [
        {
            "id": 1,
            "title": "Действие 1",
            "subactions": [
                {
                    "id": 2,
                    "title": "Субдействие 1",
                    "status": {
                        "id": 1,
                        "text": "Выполнено"
                    },
                    "countries": [
                        "kz",
                        "kg"
                    ],
                    "theme": {
                        "id": 1,
                        "text": "Изменение климата"
                    },
                    "characteristics": {
                        "0": "Другие действия",
                        "id": 1
                    },
                    "monthes": [
                        {
                            "month": 1,
                            "year": 2017,
                            "complete": 0
                        },
                        {
                            "month": 2,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 3,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 4,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 5,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 1,
                            "year": 2018,
                            "complete": 0
                        },
                        {
                            "month": 2,
                            "year": 2018,
                            "complete": 0
                        }
                    ]
                }
            ]
          }

第二个：表格应该如下图所示

第三：问题是我不知道如何将<tr>作为另一个<tr>父母的孩子。

第四：这是我尝试这样做的

 {
        task.map((value, i) => {
            if(value.subactions !== undefined){
                return (
                    value.subactions.map((subaction, i) => {
                        return (
                            <div>
                                {/*Parent tr*/}
                                <tr key={i}>
                                    <td>{value.id}</td>
                                    <td>{value.title}</td>
                                </tr>
                                {/* end Parent tr*/}

                                {/*sub table of parent tr*/}
                                <tr key={i}>
                                    <td>{subaction.id}</td>
                                    <td>{subaction.title}</td>
                                    <td>{subaction.status.text}</td>
                                    <td>
                                        {subaction.countries.map((country, i) => {
                                            return (
                                                i == subaction.countries.length - 1 ?
                                                    <span key={i}>{country} </span> :
                                                    <span key={i}> {country},</span>
                                            )
                                        })
                                        }
                                    </td>
                                    <td></td>
                                    <td>{subaction.theme.text}</td>
                                    <td>{subaction.characteristics[0]}</td>

                                    {subaction.monthes.map((month, i) => {
                                        return (
                                            month.complete ?
                                                <td className='task-month task-end'>
                                                    <input
                                                        type="checkbox"

                                                        className="css-checkbox lrg"/>
                                                    <label htmlFor="checkbox69" name="checkbox69_lbl"
                                                           className="css-label lrg vlad"/>
                                                </td> : <td></td>

                                        )
                                    })
                                    }

                                </tr>

                                {/*end sub table of parent tr*/}

                            </div>

                        )
                    })
                )
            } else {
                return undefined
            }
        })
    }

请任何人帮助指出我的错误。

Answer 1

将div标签替换为表标签，并在第二个td的父表中使用colspan =“（第二个tr中的td总数） - 2”

检查下面的变化，我已经提到了colspan计数：

task.map((value, i) => {
                                    if(value.subactions !== undefined){
                                        return (
                                            value.subactions.map((subaction, i) => {
                                                return (
                                                    <table>
                                                        {/*Parent tr*/}
                                                        <tr key={i}>
                                                            <td>{value.id}</td>
                                                            <td colspan="1+totalContriesCount+2+totalMonthsCount">{value.title}</td>
                                                        </tr>
                                                        {/* end Parent tr*/}

                                                        {/*sub table of parent tr*/}
                                                        <tr key={i}>
                                                            <td>{subaction.id}</td>
                                                            <td>{subaction.title}</td>
                                                            <td>{subaction.status.text}</td>
                                                            <td>
                                                                {subaction.countries.map((country, i) => {
                                                                    return (
                                                                        i == subaction.countries.length - 1 ?
                                                                            <span key={i}>{country} </span> :
                                                                            <span key={i}> {country},</span>
                                                                    )
                                                                })
                                                                }
                                                            </td>
                                                            <td></td>
                                                            <td>{subaction.theme.text}</td>
                                                            <td>{subaction.characteristics[0]}</td>

                                                            {subaction.monthes.map((month, i) => {
                                                                return (
                                                                    month.complete ?
                                                                        <td className='task-month task-end'>
                                                                            <input
                                                                                type="checkbox"

                                                                                className="css-checkbox lrg"/>
                                                                            <label htmlFor="checkbox69" name="checkbox69_lbl"
                                                                                   className="css-label lrg vlad"/>
                                                                        </td> : <td></td>

                                                                )
                                                            })
                                                            }

                                                        </tr>

                                                        {/*end sub table of parent tr*/}

                                                    </table>

                                                )
                                            })
                                        )
                                    } else {
                                        return undefined
                                    }
                                })
                            }

Answer 2

尝试使父行跨越到最大值，以便您可以实现输出

<tr>
    <td rowspan="maxRowCount"></td>
    <td colspan="1"></td>
</tr>