親テーブルのサブテーブル<tr>の作成方法<tr>？

Question

私はこの質問があなたにとって混乱するかもしれないことを知っていますが、私はもっと詳しく説明しようとします。

まず：私は

{ 
    "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 
         } 
        ] 
       } 
      ] 
      } 

秒をこのAPIを持っている：表には

三この写真で次のようになります。問題は、私ドンはどのように知っていないということですループ<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

あなたは出力に

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

Answer 2

を達成かもしれないので（「=第二のTD使用COLSPANでテーブルタグとあなたには、親テーブルにTDの合計数をDIVタグを取り付け、最大に親行スパンを作ってみましょう

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 
            } 
           }) 
          }