实现点击展开与关闭按钮切换操作及插入与移除table表效果

第一步要实现的效果：如下图所示，点击table表中的展开图标，切换关闭图标，从而实现展开与关闭图标的切换效果

<div id="wrapper">
	<table id="parentTable">
		<thead>
			<tr><th>序号</th><th>省份</th><th>天气</th></tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

#wrapper {
	width: 100%;
}

#parentTable{
	border-collapse: collapse;
	width: 80%;
	text-align: center;
}
#sonTable{
	border-collapse: collapse;
	width: 167.5%;
	text-align: center;
}

#parentTable thead{
	background: cyan;
}
#sonTable thead{
	background: #e6e6e6;
}
#parentTable th,
#parentTable td,
#sonTable th,
#sonTable td{
	border: 1px solid #e6e6e6;
	padding: 4px 0;
}

img {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-left: 4px;
}

var parentData = [
	{id:1,area:"北京",weather:"sunny"},
	{id:2,area:"河南",weather:"cloudy"}
]
var sonData = [
	{id:1,area:"宣武区",weather:"rain",people:"10w"},
	{id:2,area:"东城区",weather:"sunny",people:"7w"}
]

var str = ""
$.each(parentData,function(i,item){
	str += `<tr><td>${item.id}</td><td>${item.area}<img src="./img/down.png" alt=""></td><td>${item.weather}</td></tr>`
})
$("#parentTable tbody").append(str)

$("#parentTable tbody").on('click','img',function(e){
	var currentImg = $(e.target).attr("src");
}else{
	$(e.target).attr("src",down)
}

第二步要实现的效果：如下图所示，点击展开图标，动态在点击展开图标的那行后面动态插入一个table表

$("#parentTable tbody").on('click','img',function(e){
	var currentImg = $(e.target).attr("src");
	var down = "./img/down.png";
	var up = "./img/up.png"
	if(currentImg == down){
		$(e.target).attr("src",up)
		var sonTable = `<table id="sonTable">
				<thead>
					<tr>
						<th>序号</th>
						<th>地区</th>
						<th>天气</th>
						<th>人口</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>`
		
		var sonStr = "";
		$.each(sonData,function(idx,itm){
			sonStr += `<tr>
							<td>${itm.id}</td>
							<td>${itm.area}</td>
							<td>${itm.weather}</td>
							<td>${itm.people}</td>
						</tr>`
		})
		$(e.target).parent().parent().after(sonTable)
		$(e.target).parent().parent().next($("#sonTable tbody")).append(sonStr)
	}else{
		$(e.target).attr("src",down)
		$(e.target).parent().parent().next().remove();
	}
})

虽说最终实现了想要的效果，但是动态插入的table表的样式是有问题的，本来外层的table宽度设置的是80%，动态创建的table宽度我设置成167.5%，投机取巧才看起来跟外层的table宽度一致，想不到更好的解决办法了，就暂时写成这样的了，希望有其他解决方法的小伙伴，欢迎交流