動態生成表格
*創建一個頁面：兩個輸入框和一個按鈕
*代碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 循環行
** 在行里面循環單元格
3、顯示到頁面上
- 把表格的代碼設置到div里面
- 使用innerHTML屬性
*/
//獲取輸入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;
//把表格代碼放到一個變量里面
var tab = "<table border='1' bordercolor='blue'>";
//循環行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//循環單元格
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
}
tab += "</table>";
//alert(tab);
//得到div標簽
var divv = document.getElementById("divv");
//把table的代碼設置到div里面去
divv.innerHTML = tab;
}
<body> 行：<input type="text" id="h" /> 列：<input type="text" id="l" /> <br/> <input type="button" value="生成" onclick="add2();"/> <div id="divv"> </div> <script type="text/javascript"> function add2() { /* 1、得到輸入的行和列的值 2、生成表格 ** 循環行 ** 在行里面循環單元格 3、顯示到頁面上 - 把表格的代碼設置到div里面 - 使用innerHTML屬性 */ //獲取輸入的行和列 var h = document.getElementById("h").value; var l = document.getElementById("l").value; //把表格代碼放到一個變量里面 var tab = "<table border='1' bordercolor='blue'>"; //循環行 for(var i=1;i<=h;i++) { tab += "<tr>"; //循環單元格 for(var j=1;j<=l;j++) { tab += "<td>aaaaaaa</td>" } tab += "</tr>"; } tab += "</table>"; //alert(tab); //得到div標簽 var divv = document.getElementById("divv"); //把table的代碼設置到div里面去 divv.innerHTML = tab; } </script> </body>