合并表格列，tr下内容相同的td_tr 合并td成一个-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44530477/article/details/108090343

废话不多说，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="tab">
			<tr>
				<th>季度</th>
				<th>月份</th>
				<th>姓名</th>
				<th>4</th>
				<th>5</th>
			</tr>
			<tr>
				<td>第一季度</td>
				<td>1月</td>
				<td>呵呵</td>
				<td>呵呵</td>
				<td>呵呵</td>
			</tr>
			<tr>
				<td>第一季度</td>
				<td>1月</td>
				<td>飒飒</td>
				<td>嘎嘎</td>
				<td>呵呵</td>
			</tr>
			<tr>
				<td>第一季度</td>
				<td>2月</td>
				<td>飒飒</td>
				<td>嘎嘎</td>
				<td>呵呵</td>
			</tr>
			<tr>
				<td>第二季度</td>
				<td>1月</td>
				<td>呵呵</td>
				<td>呵呵</td>
				<td>呵呵</td>
			</tr>
			<tr>
				<td>第二季度</td>
				<td>1月</td>
				<td>呵呵</td>
				<td>呵呵</td>
				<td>呵呵</td>
			</tr>
		</table>

		<script>
			function getTable(table1) {
				var tb = document.getElementById(table1);
				trL = tb.rows.length;
				tdL = tb.rows[0].cells.length;
				var c;
				var count = 0
				for (let td = tdL - 1; td >= 0; td--) {
					for (var tr = 0; tr < trL; tr++) {
						if (count !== 0 && c && c !== tb.rows.length - 1) {
							tr = c
						}
						count = findSame(tb, tr, td)
						if (count !== 0) c = count + 2
						if (count === 0) {} else {
							tb.rows[tr].cells[td].rowSpan = count + 1
							for (var i = 1; i <= count; i++) {
								tb.rows[tr + i].removeChild(tb.rows[tr + i].cells[td])
							}
						}

						function findSame(tb, tr, td) {
							count = 0
							/*纵向比较*/
							function z(tb, tr, td) {
								if (td === 0) return true
								if (tb.rows[tr].cells[td - 1].innerHTML === tb.rows[tr + 1].cells[td - 1].innerHTML) {
									return z(tb, tr, td - 1)
								} else {
									return false
								}
							}
							/*横向比较*/
							function h(tb, tr, td, ) {
								if (tb.rows[tr + 1] && tb.rows[tr].cells[td] && tb.rows[tr + 1].cells[td] && tb.rows[tr].cells[td].innerHTML ===
									tb.rows[tr + 1].cells[td].innerHTML) {
									if (z(tb, tr, td)) {
										count++
										return h(tb, tr + 1, td)
									} else {
										return count
									}
								} else {
									return count
								}
							}
							count = h(tb, tr, td)
							return count
						}
					}
				}
			}


			getTable('tab')
		</script>
	</body>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
			text-align: center;
		}

		table,
		td,
		th,
		tr {
			border: 1px solid #000;
		}
	</style>
</html>

效果图如下：

合并表格