关闭

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

370人阅读 评论(0) 收藏 举报
分类:

开始接触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。最后效果为在当页生成表格。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1331次
    • 积分:52
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档