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

原创 2013年12月17日 20:13:07

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


相关文章推荐

innerHTML和innerText的用法(动态改变网页内容)

最近在学习JavaScript,觉得innerHTML和innerText太有用了,利用它们,我们可以试自己的网页实现动态化。不过在使用的过程中,千万要注意它们的大小写,因为错一点您就得不到预期的效果...

javascript动态生成按钮并绑定点击事件

前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础,但也很考基本功,基本上才3%左...

HTML实现注册功能

HTML实现注册功能正则表达式,验证用户的输入是否符合系统要求 function check_input() { var ...

原生态Ajax写法异步提交,巧妙利用innerHTML实现不清空原来内容追加请求结果

一、Ajax核心代码解析             Ajax的调用方法可以通过onclick、onchange等鼠标和键盘的事件来触发。此处不做叙述。直接看Ajax的核心代码。 ...

innerHTML和innerText的用法(动态改变网页内容)

最近在学习JavaScript,觉得innerHTML和innerText太有用了,利用它们,我们可以试自己的网页实现动态化。不过在使用的过程中,千万要注意它们的大小写,因为错一点您就得不到预期的效果...
  • cyw1900
  • cyw1900
  • 2014年05月15日 13:14
  • 557

关于JavaScript中使用appendChild和innerHTML动态添加一个元素的时间的比较

关于JavaScript中使用appendChild和innerHTML动态添加一个元素的时间比较

html&JavaScript&innerHTML演练(计算器):利用jQuery简化代码

HTML 、JavaScript、jQuery、innerHTML、计算器演练、代码简化

分别使用innerHTML和DOM在网页中动态生成表格的三种不同方法。

无标题文档 function creatTable2(){ var row = parseInt(document.getElementById("row").value);//列 var ...

javascript实现两个select选择框内容动态绑定

1. 有时候需要实现当用户选择一个选项之后,网页上另一部分的内容就随之变化,达到动态更新的目的,这时候我们就会想到ajax来实现局部刷新,接下来用一个简单的例子演示:总共有两个select选择框,第一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用javascript中innerhtml实现当页动态生成内容
举报原因:
原因补充:

(最多只允许输入30个字)