实现点击展开与关闭按钮切换操作及插入与移除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宽度一致，想不到更好的解决办法了，就暂时写成这样的了，希望有其他解决方法的小伙伴，欢迎交流