提问人：user20183888 提问时间：3/15/2023 更新时间：3/15/2023 访问量：63
如何显示嵌套数组的表头
How to display table headers for nested arrays
问：
我在html表格中有一个嵌套数组。能够显示表格。但是，我在将标题插入嵌套数组列时遇到了问题。
代码如下： 表 .js
const Table= college?.map((item =>
<tr >
<td> {item.department.map((item,i) => (
<tr>
<td>{item.studentName}</td>
<td>{item.subject}</td>
<td>{item.daysClassattended}</td>
</tr>
))}
</td>
</tr>
));
return (
<div>
<table>
<thead>
<tr>
<th>Student Name </th>
<th>Subject </th>
<th>Days Attended Classes</th>
</tr>
</thead>
<tbody>{Table}</tbody>
</table>;
</div>
在嵌套数组表中插入标头的最佳方法是什么？提前致谢
答：
0赞
motto
3/15/2023
#1
如果您只是想将所有学生一起列出而不区分他们的部门，那么这是一个选项：flatMap
const Table = college?.flatMap((item =>
item.department.map((item,i) => (
<tr>
<td>{item.studentName}</td>
<td>{item.subject}</td>
<td>{item.daysClassattended}</td>
</tr>
))
));
1赞
Sohail
3/15/2023
#2
若要向 HTML 表中的嵌套数组列插入标题，可以按如下方式修改代码：
const Table = college?.map((item) => {
return (
<>
<tr>
<th colSpan="3">{item.departmentName}</th>
</tr>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Days Attended Classes</th>
</tr>
{item.department.map((student, i) => (
<tr key={i}>
<td>{student.studentName}</td>
<td>{student.subject}</td>
<td>{student.daysClassattended}</td>
</tr>
))}
</>
);
});
return (
<div>
<table>
<tbody>{Table}</tbody>
</table>
</div>
);
评论