js 学习基础随机生成表格颜色随机

最新推荐文章于 2024-01-28 23:42:08 发布

Web攻城狮

最新推荐文章于 2024-01-28 23:42:08 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： js 学习基础随机生成表格颜色随 js css HTML web

本文链接：https://blog.csdn.net/b1244154318/article/details/51921732

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

随机生成表格：
任意输入行数或列数, 生成对应表格;
点击任意单元格, 将其数和背景颜色输出显示;

<!DOCTYPE html>
	<html>
	<head>
		<title>DOM</title>
		<meta charset="utf-8">
		<style type="text/css" >
		/*#box{
			height:100px;
			width:100px;
			background:rgb(255,234,00);
		}*/
		</style>
		<script type="text/javascript">
		window.onload = function(){
			var clos,rows,tab;
			var R,G,B;
			var btn1 = document.getElementById("t3");
			btn1.onclick = function(){
				 clos = t1.value;
			     rows = t2.value;
			     tab = document.createElement("table");
				for(var i = 0 ;i < clos ; i++){
					var tr = document.createElement("tr");
					for(var j = 0; j < rows ; j++){
							 R = Math.floor(Math.random()*255);
			     		 G = Math.floor(Math.random()*255);
			     		 B = Math.floor(Math.random()*255);
						var td = document.createElement("td");
						td.style.cssText = "width:50px;text-align:center; height:50px; border:solid 1px #FF0000;background:rgb("+ R +"," + G +"," + B +")";
 							
						td.innerHTML = Math.floor(Math.random()*clos*rows);
						tr.appendChild(td);
					}
					tab.appendChild(tr);
				}
				document.body.appendChild(tab);
			}


 		}
		</script>
	</head>
	<body>
		<label>行：</label><input type = "text" value ="" id = "t1">
		<label>列：</label><input type = "text" value ="" id = "t2">
		<input type = "button" value = "生成表格" id ="t3">
		<div id ="box"></div>
	</body>
	</html>