動態生成表格案例
阿新 • • 發佈:2017-07-16
col tle html var ges onclick .get htm order
步驟
1、創建一個頁面,兩個輸入框和一個按鈕
2、得到輸入的行和列的值
3、生成表格
--循環行
--在行裏面循環列
4、顯示到頁面上
--把表格的代碼設置到div上
--使用innerHTML屬性
代碼
<html> <head> <title>Html示例</title> <style type="text/css"> </style> </head> <body> 行:<input type="text" id="hang"/> 列:<input type="text" id="lie"/> <br/> <input type="button" value="生成" onclick="add()"/> <div id="divid"> </div> </body> <script type ="text/javascript"> function add() { var h =document.getElementById("hang").value; //獲取輸入框裏面的值 ,所以要加上value var l = document.getElementById("lie").value; var table ="<table border=‘1‘ bordercolor =‘red‘>"; for(var i=1;i<=h;i++) { table += "<tr>"; for ( var j=1;j<=l;j++) { table +="<td>bbbbbbbbbb</td>"; } table += "</tr>"; } table += "</table>"; var div1 = document.getElementById("divid"); div1.innerHTML=table; } </script> </html>
結果顯示為
動態生成表格案例