動態表格的生成
<html>
<head>
<meta charset="UTF-8">
<title>動態生成表格</title>
</head>
<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>aaaaaa</td>";
}
tab+="</tr>";
}
tab+="</table>";
//得到divv標籤
var divv=document.getElementById("divv");
//把table的代碼設置到div裏面去
divv.innerHTML=tab;
}
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur