javascript動態(tài)生成表格詳解
更新時間：2021年10月10日 11:50:41 作者：莎蛋蛋的蓋世英雄啊
這篇文章主要介紹了JavaScript動態(tài)生成表格的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
*創(chuàng)建一個頁面：兩個輸入框和一個按鈕
*代碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 循環(huán)行
** 在行里面循環(huán)單元格
3、顯示到頁面上
- 把表格的代碼設置到div里面
- 使用innerHTML屬性
*/
代碼如下:
<html >
<head>
<title>動態(tài)生成表格</title>
<style type = "text/css">
</style>
</head>
<body>
行:<input type="text" id="h"/><br/>
列:<input type="text" id="l"/><br/>
<input type="button" value="生成" onclick="add1()"/>
<div id="divv">
</div>
</body>
<script type="text/javascript">
function add1(){
/*
1.得到輸入的行和列的值
2.生成表格
-循環(huán)行
-在行里面循環(huán)單元格
3.顯示到頁面上
-使用innerHTML屬性將表格代碼設置到div里面
*/
var h =document.getElementById("h").value;
//alert(h);
var l =document.getElementById("l").value;
var tab ="<table border='1' bordercolor='red'>";
for(var i=0;i<h;i++){
tab += "<tr>";
for(var j=0;j<l;j++){
tab +="<td>aaaa</td>"
}
tab +="</tr>"
}
tab +="</table>";
var div1 =document.getElementById("divv");
div1.innerHTML = tab;
}
</script>
</html>
效果圖演示:
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
JavaScript利用canvas實現(xiàn)鼠標跟隨特效
canvas是一個很神奇的玩意兒，比如畫表格、畫海報圖都要用canvas去做。本文就來利用canvas制作個簡單的鼠標跟隨特效，快跟隨小編一起學習一下吧2022-10-10
這篇文章主要介紹了js+html5實現(xiàn)可在手機上玩的拼圖游戲,涉及javascript結(jié)合html5進行圖形操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)跟隨鼠標移動的圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
微信小程序自定義tabbar實現(xiàn)突出樣式詳解流程
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
使用純javascript實現(xiàn)經(jīng)典掃雷游戲
本文給大家分享的是個人剛開始學習javascript的時候?qū)懙姆聎indows經(jīng)典的掃雷游戲的代碼，當時只是寫了下來，沒加注釋，這里補上，有需要的小伙伴可以參考下。2015-04-04
禁止頁面刷新讓F5快捷鍵及右鍵都無效，下面有個不不錯的實現(xiàn)方法，大家可以感受下2014-01-01
js中 某個函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問這個函數(shù)中定義的變量，這稱為閉包(Closure)2008-11-11
JavaScript Event學習第十章 一些可替換的事件對
為了讓我們的JavaScript驅(qū)動的頁面對那些不能或者不想使用鼠標的用戶也能很好的使用，我們對于像mouseover和click這樣的事件做一些處理，同樣的，對于非鼠標事件也同樣的要我們的腳本執(zhí)行。2010-02-02
FreeMarker是一個用Java語言編寫的模板引擎，它基于模板來生成文本輸出，用FreeMarker判斷對象是否為空的方法大家知道嗎，這篇文章就針對這個知道點做介紹，需要的朋友可以參考下2015-08-08
迭代器是一個統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問，它是通過一個鍵為Symbol.iterator的方法來實現(xiàn)，這篇文章主要介紹了ES6 中的迭代器和生成器,需要的朋友可以參考下2022-11-11