脚本宝典收集整理的这篇文章主要介绍了javascript动态生成表格详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
*创建一个页面:两个输入框和一个按钮
*代码和步骤
/*
1、得到输入的行和列的值
2、生成表格
** 循环行
** 在行里面循环单元格
3、显示到页面上
- 把表格的代码设置到div里面
- 使用innerHTML属性
*/
代码如下:
<html > <head> <tITle>动态生成表格</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.生成表格 -循环行 -在行里面循环单元格 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>
效果图演示:
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的javascript动态生成表格详解全部内容,希望文章能够帮你解决javascript动态生成表格详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。