显示嵌套的 html 表格循环遍历对象的嵌套数组

Question

作为输入，我有一个对象数组。我需要遍历它并显示如下所示的表格：

const arr = [
  {
    name: 'home/',
    children: [
      {
        name: 'test1',
        children: [
          {
            name: 'test3',
            children: []
          }
        ]
      },
      {
        name: 'test2',
        children: []
      }
    ]
  }
]

|      | test1 | test3 |
| home |       |       |
|      | test2 |       |

 

Answer 1

您可以尝试嵌套表格。当border-collapse: collapse 设置在table 元素CSS 上时，您还可以尝试在tr 或td 元素上设置边框。

var arr = [ { name: 'home/'
            , children: [ { name: 'test1'
                          , children: [ { name: 'test3'
                                        , children: []
                                        }
                                      ]
                          }
                          ,
                          { name: 'test2'
                          , children: []
                          }
                        ]
            }
          ];
function makeTable(rows){
  return new DocumentFragment().appendChild(rows.reduce(function(t,r){
                                                          var tr = document.createElement("tr"),
                                                              td = document.createElement("td");
                                                          t.appendChild(tr)
                                                           .appendChild(td)
                                                           .append(r.name);
                                                          r.children.length && tr.appendChild(makeTable(r.children))
                                                          return t;
                                                        }, document.createElement("table")))
}
document.getElementById("container")
        .appendChild(makeTable(arr));

table {
  border: 1px solid black;
}

<div id="container"></div>