老师有个问题，困扰我一天了

怎么动态生成一个表格呢老师，我困惑的地方是我想生成可设置行合并rospan的表格，js什么的都学了，老师教我下，如何动态生成可设置rowspan或者colspan的表格，document.create Element（）… help

母鸡阿 2021-10-16

收起

1回答

好帮手慕然然 2021-10-17 13:17:02

同学你好，老师写了一个简单的例子，同学可以作为参考自己实现一下(代码中有注释)，如下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>table</title>

	</head>

	<body>

		<table id="table" border="1" cellspacing="0" width="50%"></table>

		<script type="text/javascript">
			// 获取DOM元素
			var table = document.getElementById("table");

			// 定义数组，存放 td 的 colSpan 的值
			// 3表示 <td colspan="3"></td>
			// 0表示 <td></td> 即没有colspan
			var rets = ["3", "0", "0", "0", "0", "2", "0", "3", "0", "0"];

			// 遍历该数组，生成10行5列表格
			for (var m = 0; m < rets.length; m++) {
				// 创建tr标签
				var tr = document.createElement("tr")
				// 判断colspan是否为0，计算出tdcol的值，用于生成td
				if (rets[m] > 0) {

					tdcol = 5 - rets[m] + 1 // 假如colSpan=3，需要生成3个td

				} else {

					tdcol = 5 - rets[m] // 假如colSpan=0，需要生成5个td

				}
				// 遍历tdcol
				for (var n = 0; n < tdcol; n++) {
					// 创建td标签
					var td = document.createElement("td")
					// 设置内容
					td.innerHTML = n;
					// 如果rets[m]不为0，给每一行的第一个td设置colSpan
					if (n == 0 && rets[m] > 0) {

						td.colSpan = rets[m]

					}
					// 将生成的td挂载到tr	
					tr.appendChild(td)

				}
				// 将tr挂载到table中
				table.appendChild(tr)
			}
		</script>

	</body>

</html>

实现效果如下：