原生js实现动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<button>点击创建表格</button>
</body>
</html>
<script>
var otxt1 = document.getElementById("txt1");
var otxt2 = document.getElementById("txt2");
var obtn = document.getElementsByTagName("button")[0];
//创建表格
var otab = document.createElement("table");
document.body.appendChild(otab);
obtn.onclick = function () {
var n1 = Number(otxt1.value);
var n2 = Number(otxt2.value);
//创建tr
for (var i = 0; i < n1; i++) {
var otr = document.createElement("tr")
otab.appendChild(otr);
for (var j = 0; j < n2; j++) {
var otd = document.createElement("td")
otr.appendChild(otd);
otd.innerHTML = "哈哈哈";
}
}
}
</script>
