前言

菜鸟来记录下自己工作中或者学习中遇到的问题和一些想法，各位看官也可以来指点一下，分享观点。
这是第一次写个人博客，之前也知道写技术博客对个人技术的提升很有效，但是一直没啥动力开动第一篇，昨天单位新开工个项目，技术架构不算前沿，Js里有一些是预封装的方法，不过很多地方会涉及到业务需求不一致，所以要自己手写Js。今天有一个纵向多层表头的表格，自己在写的时候发现一个很巧妙的写法，省去很多原本需要判断的地方。最初是在浏览器element中试着改colspan时发现的，后来发现可以和表格的数据循环很好的结合到一起，简化了原来的代码，原来的代码需要在ForEach循环中加判断，（不知为啥，这个项目里ForEach中写"=="会报错，这个问题之后再研究- -）。

需求

项目是军工项目，由于涉密，办公电脑不能访问公网，也禁用物理介质，具体页面效果等我之后想招上图。

代码

现在已经下班了，代码还在内网里，我就凭记忆把主要部分写出来吧。
由于表格的样式是根据后台返的数据来进行变化，所以要依靠Js来动态生成表格，所以html部分极简。

html

//抛掉所有外层代码 
<div id = myTable>
<thead><tr></tr></thead>
<tbody><tr></tr></tbody>
</div>

Js

//表头部分
$.demo.ajax('/my/url','post','{tpye:head}').done((data)=>{ //首先ajax从后台获取表头内容
$('#myTable thead tr').empty();//每次都要先清空表头
let htmlHead = '';//收集html表达式
let res = data.data;//ajax返回对象
htmlHead += `<tr class = myTable>`;
//循环拼接表头
res.forEach((d,i) => {
htmlHead += `<th>${d.name}</th>`;
});
htmlHead += `</tr>`;
//把拼好的表头渲染到页面
$('#myTable thead tr').html(htmlHead);
});
)

//表格数据部分
$demo.ajax('/my/bodyUrl','post','{tpye:head}').done((data) => {
$('#myTable tbody tr').empty();
let htmlBody = '';
let res = data.data;
//返回数据的格式 这里先写个demo 
//object(3){name:装甲装备，children：object:(4){name:自行火炮，contentlist：(object(5){name:装备数，content：15})}} （）里表示包含的对象数量

//第一层循环：大类名称
res.forEach((d,i) =>{
	htmlBody += `<tr>`;
	//这里的 +1 是重点，把纵向的第一列的表头单独看作一行，这一行只有一个td，根据子元素的数量，决定占多少行，+1是其本身占的行。这样二级表头在循环的时候就不用考虑加判断是否需要拼接一级表头，代码简化，而且性能提升。
	htmlBody += `<td rowspan = ${d.children.length + 1 }>${d.name}</td>`;
		//第二层循环：小类名称
		let res = d.children;//
		res.forEach((e,j) =>{
		htmlBody += `<tr>`;
		htmlBody += `<td>${e.name}</td>`;
			//第三层循环：小类数值
			let res = e.contentList;
			res.forEach((f,k) => {
			htmlBody += `<td>${f.content}</td>`
			})
		htmlBody += `</tr>`
		});

	htmlBody += `</tr>`
});
$('#myTable tbody tr').html(htmlBody);

});
)