随机生成表格:
任意输入行数或列数, 生成对应表格;
点击任意单元格, 将其数和背景颜色输出显示;
<!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>
js 学习基础 随机生成表格 颜色随机
最新推荐文章于 2022-08-30 19:16:50 发布