利用javascript中innerhtml实现当页动态生成内容

开始接触javascript,找了很多小型的例子,其中一个就是用js实现在网页中文本框中输入表格的行数和列数,点击

生成表格按钮,即可生成相应的表格。问题是生成的表格会跳转到另一个页面中,所以在js代码中使用innerhtml完成。

在实现时使用如下js脚本:

<body>
请输入以下内容:<br>
表格行数:<input type="text" name="txt1" /><br>
表格列数:<input type="text" name="txt2" /><br>

<input type="button" value="生成表格" onclick="funTab()" /><br>
<div id="tabdiv"></div>


<script type="text/javascript">
function funTab()
{
var row=document.getElementById("txt1").value;
var col=document.getElementById("txt2").value;
var s="";
var tabdiv=document.getElementById("tabdiv");
s+='<table width="80%" background="red" border="1px">';
for(var i=1;i<=row;i++)
{
for(var j=1;j<=col;j++)
{
s+='<td>&nbsp';
s+='</td>';
}
   s+='</tr>';
}

s+='</table>';
tabdiv.innerHTML=s;
}


</script>


</body>

基本思路:在程序中设一个变量s,将生成表格的代码转化为字符串添加到s中,在HTML中设一个div,使用tabdiv的属性innerHTML中添加s。最后效果为在当页生成表格。


阅读更多
个人分类: javascript
下一篇SSH框架中经典错误:java.lang.NoSuchMethodError: antlr.collections.AST.getLine()解决方案
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭