js案例1：输⼊⾏数列数，动态⽣成表格
**实现效果：**动态⽣成N⾏M列表格，并且每个表格数字随机，背景颜⾊随机
代码：
javascript动态效果
<!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 = ElementById("row").value;
var rowCount = ElementById("row").value;
var colCount = ElementById("col").value;
//创建出来
var tab = ateElement("table");
//把⽣成的table标签对象，放到页⾯上body元素的最后
document.body.appendChild(tab);
for(var i=0; i<rowCount; i++) {
var tr = ateElement("tr");
tab.appendChild(tr);
for(var j=0; j<colCount; j++) {
var td = ateElement("td");
td.innerHTML = und(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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。