JavaScript實現(xiàn)動態(tài)生成表格
更新時間:2020年08月02日 09:26:11 作者:veejaLiu
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)生成表格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)動態(tài)生成表格的具體代碼,供大家參考,具體內(nèi)容如下
功能描述
在輸入框中輸入行和列,點擊按鈕,生成擁有對應行和列的表格。如下圖所示:
分析
HTML界面設計
<body> 行:<input type="text" id="row" /> 列: <input type="text" id="col" /> <input type="button" name="go" id="go" value="go" onclick="add()" /> <br /><br /> <div id="table"> </div> </body>
js代碼部分:
先得到輸入的行和列的值
var row = document.getElementById("row").value; var col = document.getElementById("col").value;
生成表格,新建一個字符串str,把表格的html代碼追加進去,先循環(huán)行,再循環(huán)列,生成一個一個的單元格。
var str += '<table border="1" >'; for(var i = 0; i < row; i++) { str += '<tr>'; for(var j = 0; j < col; j++) { str += '<td height="30px" width="100px"></td>'; } str += '</tr>'; } str += '</table>';
獲取上面的盛放表格的盒子對象,并向里面添加內(nèi)容。
var divobj = document.getElementById("table"); divobj.innerHTML = str;
代碼
<body> 行:<input type="text" id="row" /> 列: <input type="text" id="col" /> <input type="button" name="go" id="go" value="go" onclick="add()" /> <br /><br /> <div id="table"> </div> </body> <script type="text/javascript"> function add() { var row = document.getElementById("row").value; var col = document.getElementById("col").value; //alert(row + "*" + col); var str = ""; //alert(str); str += '<table border="1" >'; for(var i = 0; i < row; i++) { str += '<tr>'; for(var j = 0; j < col; j++) { str += '<td height="30px" width="100px"></td>'; } str += '</tr>'; } str += '</table>'; var divobj = document.getElementById("table"); divobj.innerHTML = str; } </script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Markdown-it將Markdown文本解析轉(zhuǎn)換為HTML
Markdown-it是一款強大的Markdown解析器,支持多種Markdown語法,并能將Markdown文本轉(zhuǎn)換為HTML,通過npm可快速安裝,并可在JavaScript項目中簡易調(diào)用,Markdown-it不僅支持基本Markdown語法,還擴展了表格、腳注等高級功能,同時允許自定義配置和使用插件以增強功能2024-10-10javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02