js 实现表格合并单元格

需求 实现下面的表格效果

 代码：

//利用去重原理
			function table(dom) {
				var arr = [];
				var f= document.getElementsByClassName(dom);
				for (let i = 0; i < f.length; i++) {

					if (arr.indexOf(f[i].innerHTML) == -1) {
						arr.push(f[i].innerHTML);
						var index = i; //index是第一个元素
						document.getElementsByClassName(dom)[i].style.borderBottom = 0 + "px";
					} else {
						document.getElementsByClassName(dom)[i].style.display = "none"; //隐藏重复的元素
						document.getElementsByClassName(dom)[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1
					}
				}
			}
			table('f1')
			table('f2')

 想合并哪些单元格 直接给他添加对应类名即可

 

	<table class="table table-striped table-sm table1">
								<thead>
									<tr>
										<th colspan="3">一级
											指标</th>
										<th>二级
											指标</th>
										<th>三级指标</th>
										<th>指标说明</th>
									</tr>
								</thead>
								<tbody>
									<tr class="order">
										<td class="f1" colspan="3">111</td>
										<td>222</td>
										<td>333</td>
										<td>444</td>


									</tr>
									<tr class="order">
										<td class="f1" colspan="3">111</td>
										<td class="f2">222</td>
										<td>555</td>
										<td>666</td>

									</tr>
									<tr class="order">
										<td class="f1" colspan="3">111</td>
										<td class="f2">222</td>
										<td>777</td>
										<td>888</td>

									</tr>
									
								</tbody>
							</table>