JS-生成表格

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>homework2</title>
</head>
<script type="text/javascript">
var table;
window.onload=function(){
table=document.getElementById("table");
}
function change(){
var all = table.childNodes;
for(var i = 0 ; i<all.length ; i++){
table.removeChild(all[i]);
}
var rows = parseInt(document.getElementById("rows").value);
var cols = parseInt(document.getElementById("cols").value);
for( var i = 0; i<rows ; i++){
var tr = document.createElement("tr");
for( var j = 0; j<cols ; j++){
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
}

</script>
<style type="text/css">
td{
width:30px;
height: 10px;
}
</style>
<body>
行:<input type="text" id="rows" value="0">
列:<input type="text" id="cols" value="0">
<br>
<input type="button" value="点击生成表格" onclick="change()">
<table border="1px" id="table">

</table>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/Derek-614/p/8990726.html