JS设置行列宽高实现表格

最新推荐文章于 2026-05-03 06:01:04 发布

原创最新推荐文章于 2026-05-03 06:01:04 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

js 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何通过JavaScript来实现表格的行列宽度和高度的动态设置，包括一个直观的gif效果展示和具体的代码示例。

gif效果

在这里插入图片描述

代码段

<body>
		行数：<input type="text" id="row" /><br />
		列数：<input type="text" id="col" /><br />
		宽度：<input type="text" id="width" /><br />
		高度：<input type="text" id="height" /><br />
		<input type="button" id="click" value="生成表格" onclick="diaoyong()" />
		<table align="center">
			<tr>
				<td colspan=""></td>
			</tr>

		</table>

		<script>
			function diaoyong() {
				var row = document.getElementById("row").value;
				var col = document.getElementById("col").value;
				var width = document.getElementById("width").value;
				var height = document.getElementById("height").value;
				var table = new Table(row, col, width, height);
				var show = table.run();
				document.write(show);
			}

			function Table(row, col, width, height) {
				this.row = row;
				this.col = col;
				this.width = width;
				this.height = height;
				this.run = shengcheng;
			}

			function shengcheng() {
				var show = ""
				var color = ""
				show += ("<table width='" + this.width + "px' height='" + this.height + "px' align=" + 'center' + ">");
				for (var i = 0; i < this.row; i++) {
					switch ((i+1)%7) {
						case 1:
							color = "red";
							break;
						case 2:
						color = "orange";
							break;
						case 3:
						color = "yellow";
							break;
						case 4:
						color = "green";
							break;
						case 5:
						color = "cyan";
							break;
						case 6:
						color = "blue";
							break;
						default:
						color = "purple";
						count = 0;
					}
					show += ("<tr bgcolor = '" + color + "'>")
					for (var y = 0; y < this.col; y++) {
						if (y == 0) {
							show += ("<td >")
							show += ("</td>")
						} else {
							show += ("<td>")
							show += ("</td>")
						}
					}
					show += ("</tr>")
				}
				show += ("</table>");
				
				return show;
			}
		</script>

	</body>