js案例1: 输入行数列数，动态生成表格

最新推荐文章于 2022-10-01 10:30:00 发布

小佬呀

最新推荐文章于 2022-10-01 10:30:00 发布

阅读量4.2k

点赞数 3

分类专栏： JavaScript 文章标签：动态生成表格 js生成表格

本文链接：https://blog.csdn.net/qq_36722545/article/details/98107636

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在这里插入图片描述
**实现效果：**动态生成N行M列表格，并且每个表格数字随机，背景颜色随机
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面试题-动态生成表格</title>
		<style>
			body{
				font:700 14px/1.5 Arial;margin:0;padding:0 10px;
			}
			table{
				clear:both;border:1px solid #000;
			}
			td{
				color:#ccc;cursor:pointer;text-align:center;
				border:1px solid #000;padding:5px;
			}
			#setting{
				float:left;clear:left;line-height:28px;
				margin:10px 0;
			}
			#setting input{
				width:50px;font-family:inherit;
				border:2px solid #CCC;margin:0 5px;padding:4px;
			}
			#btn{
				font-size:14px;line-height:18px;
				color:#fff;text-decoration:none;
				background:#353535;border-top:1px #999 solid;
				border-radius:5px;padding:4px 6px;
			}
			#setting label,#setting input,#setting a,#msg span,#msg em{
				float:left;
			}
		</style>

		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			function createTable(){
			var rowCount = document.getElementById("row").value;
			var colCount = document.getElementById("col").value;
			
			//创建出来
			var tab = document.createElement("table");
			//把生成的table标签对象，放到页面上body元素的最后
			document.body.appendChild(tab);
			
			for(var i=0; i<rowCount; i++) {
				var tr = document.createElement("tr");
				tab.appendChild(tr);
				
				for(var j=0; j<colCount; j++) {
					var td = document.createElement("td");
					td.innerHTML = Math.round(Math.random()*100);
					td.style.background = '#' + Math.random().toString(16).slice(-6);
					tr.appendChild(td);
				}
			}
		}
	</script>
	</head>
	<body>
		<div id="setting">
			<label>行数</label><input type="text" id="row">
			<label>列数</label><input type="text" id="col">
			<a href="javascript:;" onclick="createTable()" id="btn">生成表格</a>
		</div>

	</body>
</html>