<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>創建表格</title>
<!-- 定義一些樣式,將來給表格用 -->
<style type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td{
border:#0099FF 1px solid;
padding:10px 20px 3px 1px;
}
</style>
<script type="text/javascript">
//創建單行單列的表格
function createTable(){
//創建表格元素
var table = document.createElement("table");
//創建表格行元素
var tr = document.createElement("tr");
//創建單元格元素
var td = document.createElement("td");
td.innerHTML = "我是td, 我最牛~!"; //給單元格設置文本
tr.appendChild(td); //將單元格添加到表格行上
table.appendChild(tr); //將表格行添加到表格上
//將創建好的整個table掛載到div上
document.getElementById("tab").appendChild(table);
}
//創建5行6列的表格
function createTable2(){
//創建table標簽
var table = document.createElement("table");
for(var r = 0;r<5;r++){ //外層循環控制行數
var tr = document.createElement("tr");
//創建table標簽
for(var c = 0;c<6;c++){ //內層循環控制列(單元格)數
var td = document.createElement("td");
td.innerHTML = (r+1)+"行"+(c+1)+"列";
//將td掛載到tr上
tr.appendChild(td)
}
//將tr掛載到table上
table.appendChild(tr);
}
//將創建好的整個table掛載到div上
document.getElementById("tab").appendChild(table);
}
//創建指定行和列的表格
function createTable3(){
//獲取用戶輸入的行數
var row = document.getElementById("row").value;
//獲取用戶輸入的列數
var col = document.getElementById("col").value;
var table = document.createElement("table");
for(var r = 0;r<row;r++){
var tr = document.createElement("tr");
for(var c = 0;c<col;c++){
var td = document.createElement("td");
td.innerHTML = (r+1)+"行"+(c+1)+"列";
tr.appendChild(td)
}
table.appendChild(tr);
}
//將創建好的整個table掛載到div上
document.getElementById("tab").appendChild(table);
}
</script>
</head>
<body>
<input type="button" value="創建表格" onclick="createTable()" /><br />
<input type="button" value="創建表格(5行6列)" onclick="createTable2()" /><br />
行數:<input type="text" name="row" id="row"/><br />
列數:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="創建表格(行列用戶輸入)" onclick="createTable3()" />
</div>
</body>
</html>
