<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成案例</title>
<style>
#div1{
width: 500px;
margin: auto;
}
table, tr, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin-top: 24px;
}
td {
height: 24px;
width: 120px;
}
</style>
<script>
function addTb() {
//获取行和列的值
var rowNumStr = document.getElementById("row").value;
var colNumStr = document.getElementById("col").value;
var rowNum = parseInt(rowNumStr)
var colNum = parseInt(colNumStr)
console.log(rowNum, colNum)
//根据行数创建tr
//根据列数创建td
var tb = document.getElementById("tb");
for(var i = 0; i < rowNum; i++) {
var line = document.createElement("tr");
for(var j = 0; j < colNum; j++) {
var td = document.createElement("td");
line.appendChild(td);
}
tb.appendChild(line)
}
}
</script>
</head>
<body>
<div id="div1">
<input type="text" id="row" autofocus="autofocus"/>行
<input type="text" id="col" />列
<button type="button" onclick="addTb()" >生成</button>
</div>
<div >
<table id="tb" align="center"></table>
</div>
</body>
</html>
