<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: #249bdb 1px solid;
width: 500px;
border-collapse: collapse;
}
table td {
border: #249bdb 1px solid;
padding: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
表格是由行組成。 表格節點對象中insertRow()方法就完成了創建行並添加的動作
行是由單元格組成，通過tr節點對象的insertCell()方法完成
*/
function crtTable() {
var oTabNode = document.createElement("table");
var rowValue = document.getElementsByName("rownum")[0].value;
var colValue = document.getElementsByName("colnum")[0].value;
for (var x = 1; x <= rowValue; x++) {
var oTrNode = oTabNode.insertRow();
for (var y = 1; y <= colValue; y++) {
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"--"+y;
}
}
//將表格節點添加到div中
document.getElementsByTagName("div")[0].appendChild(oTabNode);
document.getElementsByName("crtbtn")[0].disabled = true; //點擊了按鈕後，按鈕無法再次點擊了
}
</script>
行:<input type="text" name="rownum" /> 列:<input type="text" name="colnum" />
<input type="button" value="創建表格" name="crtbtn" onclick="crtTable()"/>
<hr/>
<div></div>
</body>
</html>
在瀏覽器中的默認效果:
當輸入行值和列值，點擊按鈕後:
