输入行数跟列数,自己生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建动态表格</title>
</head>
<body>
<h1>创建动态表格</h1>
行数:<input type="number" name="rows" id="rows" /><br />
列数:<input type="number" name="cols" id="cols" /><br />
<button onclick="mytable()">创建表格</button>
<div id="tabDiv"></div>
<script type="text/javascript">
function mytable () {
var rows = document.getElementById("rows").value;//getElementByid()根据指定的id属性创建DOM对象
var cols = document.getElementById("cols").value;
var table = document.createElement("table");//createElemnet()在文档中创建一个DOM对象
table.border = 1;//表格的边框为1
for (var r = 0; r < rows; r++) {
var tr = document.createElement('tr');
for (var c = 0; c < cols; c++) {
var td = document.createElement('td');
td.innerHTML= r +', ' + c ;
tr.appendChild(td);//appendChild()方法用于把新的子节点添加到指定节点
}
table.appendChild(tr);
}
document.getElementById("tabDiv").appendChild(table);
}
</script>
</body>
</html>