点击了按钮，会触发点击事件，这是一个函数，所有的内容都写进函数里面。
用循环的方式，先获取到input输入的值，(input输入数字的时候，用input.value获取)分别创建出table tr td，并把table挂到body,把tr挂到table,把td挂到tr,语法如
table.appendChild()
每一次点击都生成新的表格，所以要把之前的删除，用移除元素的方式
remove()
td的内容是随机数字，td的背景色也是随机的，用
td.innerHTML = "Math.random()*100"和td.style.backgroungClolor=rgb(),配合模板字符串使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>插入制定表格数的表格</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="" rel="stylesheet" />
<style>
body {
font: 700 14px/1.5 Arial;
margin: 0;
padding: 0 10px;
}
table {
clear: both;
border: 1px solid #000;
}
td {
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;
}
em {
width: 25px;
height: 25px;
display: inline-block;
margin-right: 5px;
}
#setting label,
#setting input,
#setting a {
float: left;
}
strong {
color: red;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="setting">
<label>行数</label>
<input type="text" id="row" />
<label>列数</label>
<input type="text" id="col" />
<a href="javascript:;" id="btn">生成表格</a>
<strong>提示：行和列只能是数字，且最大为50</strong>
</div>
</body>
<script>
// 找到行数和列数input.value
// 点击按钮
var createTable = document.getElementById("btn");
// 点击了生成表格的时候，生成表格table tr td，外层搞定行，内层搞定列数
createTable.onclick = function () {
// 创建表格挂到body上面
var tableNode = document.createElement("table");
var rowNumber = parseInt(document.getElementById("row").value);
// 点击的时候，如果下面有表格，就把表格清除，生成新的表格
if (document.querySelector("table")) {
document.body.removeChild(document.querySelector("table"));
}
for (var i = 0; i < rowNumber; i++) {
var trNode = document.createElement("tr");
var colNumber = parseInt(document.getElementById("col").value);
for (var j = 0; j < colNumber; j++) {
var tdNode = document.createElement("td");
// tdNode里面是0-100的随机数字
tdNode.innerHTML = parseInt(Math.random() * 100);
// 为tdNode添加背景色
// rgb(0,255,255),rgb里面的数字要是随机数
tdNode.style.backgroundColor = `rgb(
${Math.random() * 255} ,
${Math.random() * 255} ,
${Math.random() * 255} )`;
trNode.appendChild(tdNode);
}
tableNode.appendChild(trNode);
}
document.body.appendChild(tableNode);
};
// td里面是随机数，并为td添加背景色
</script>
</html>
