快捷導(dǎo)航

javascript動(dòng)態(tài)生成表格詳解

更新時(shí)間：2021年10月10日 11:50:41 作者：莎蛋蛋的蓋世英雄啊

這篇文章主要介紹了JavaScript動(dòng)態(tài)生成表格的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

*創(chuàng)建一個(gè)頁面：兩個(gè)輸入框和一個(gè)按鈕

*代碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 循環(huán)行
** 在行里面循環(huán)單元格
3、顯示到頁面上
- 把表格的代碼設(shè)置到div里面
- 使用innerHTML屬性
*/

代碼如下:

<html >
 <head>
  <title>動(dòng)態(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屬性將表格代碼設(shè)置到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實(shí)現(xiàn)鼠標(biāo)跟隨特效
canvas是一個(gè)很神奇的玩意兒，比如畫表格、畫海報(bào)圖都要用canvas去做。本文就來利用canvas制作個(gè)簡單的鼠標(biāo)跟隨特效，快跟隨小編一起學(xué)習(xí)一下吧
2022-10-10
js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
微信小程序自定義tabbar實(shí)現(xiàn)突出樣式詳解流程
tabBar相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
使用純javascript實(shí)現(xiàn)經(jīng)典掃雷游戲
本文給大家分享的是個(gè)人剛開始學(xué)習(xí)javascript的時(shí)候?qū)懙姆聎indows經(jīng)典的掃雷游戲的代碼，當(dāng)時(shí)只是寫了下來，沒加注釋，這里補(bǔ)上，有需要的小伙伴可以參考下。
2015-04-04
禁止頁面刷新讓F5快捷鍵及右鍵都無效
禁止頁面刷新讓F5快捷鍵及右鍵都無效，下面有個(gè)不不錯(cuò)的實(shí)現(xiàn)方法，大家可以感受下
2014-01-01
js的閉包的一個(gè)示例說明
js中某個(gè)函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問這個(gè)函數(shù)中定義的變量，這稱為閉包(Closure)
2008-11-11
JavaScript Event學(xué)習(xí)第十章一些可替換的事件對(duì)
為了讓我們的JavaScript驅(qū)動(dòng)的頁面對(duì)那些不能或者不想使用鼠標(biāo)的用戶也能很好的使用，我們對(duì)于像mouseover和click這樣的事件做一些處理，同樣的，對(duì)于非鼠標(biāo)事件也同樣的要我們的腳本執(zhí)行。
2010-02-02
freemarker判斷對(duì)象是否為空的方法
FreeMarker是一個(gè)用Java語言編寫的模板引擎，它基于模板來生成文本輸出，用FreeMarker判斷對(duì)象是否為空的方法大家知道嗎，這篇文章就針對(duì)這個(gè)知道點(diǎn)做介紹，需要的朋友可以參考下
2015-08-08
JavaScript迭代器與生成器使用詳解
迭代器是一個(gè)統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問，它是通過一個(gè)鍵為Symbol.iterator的方法來實(shí)現(xiàn)，這篇文章主要介紹了ES6 中的迭代器和生成器,需要的朋友可以參考下
2022-11-11