利用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动态生成标签

var users = [ {"name": "tdxy01","icon":"images/noavatar_small.gif"}, {"name": "沉眠楚人"...
  • qq_26499247
  • qq_26499247
  • 2017年02月16日 10:58
  • 267

原生js创建虚拟数字键盘输入

使用google浏览器访问效果图如下:                        以下是index.html文档源码: 模拟数字键盘 ...
  • willamlan
  • willamlan
  • 2015年09月19日 23:08
  • 2137

JS实现自定义简单网页软键盘效果代码

自写一个简单点的网页软键盘 * { padding:0; margin:0; } body { background:#fff; } th, ...
  • paj123456789
  • paj123456789
  • 2017年07月20日 11:01
  • 400

innerHTML动态生成table并进行数据填充

当我们需要动态生成table,并且这些数据没有绑定到页面中,只是一些临时获得的数据,那么这个时候要将这些数据放到table中,jstl的实现方式肯定已经不行了,那么这时候我们可以通过innerHTML...
  • Megamind_HL
  • Megamind_HL
  • 2017年12月25日 12:15
  • 29

table的innerHTML

错误现象:     在IE中使用如下语句:table.innerHTML = content; 动态修改table的HTML内容时,出现“未知运行错误”。错误原因:     table的innerHT...
  • mydeman
  • mydeman
  • 2007年10月11日 13:56
  • 5964

javascript中的innerHTML是什么意思,怎么个用法?

nnerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容; 如:这是内容 ,我们可以通过 document.getElementById('aa').innerHTML 来获取id为...
  • qq_27918787
  • qq_27918787
  • 2016年09月22日 21:42
  • 23592

JavaScript中document.getElementById和document.write

1、操作HTML元素 JavaScript访问某个HTML元素,可以使用document.getElementById(id)方法。 例子: Hello document.getElement...
  • u014068781
  • u014068781
  • 2017年02月09日 00:02
  • 2955

android WebView(四)与html交互

WebView如何与html相互交互 很多时候WebView需要和html进行交互,要么需要通过Java代码控制页面活动,要么就是通过js触发Java代码,WebView提供了中机制。 首先来看一...
  • w2865673691
  • w2865673691
  • 2015年04月09日 16:05
  • 1864

通过js获取td标签的text、html、innerhtml三者的区别

注意innerhtml是原生的js的用法。 text、html是jQuery的用法,原生的js语法是没有text、html这种用法的。 原生的innerhtml = jQuery的...
  • Ideality_hunter
  • Ideality_hunter
  • 2017年04月19日 09:52
  • 3675

js innerHTML 改变div内容的方法

永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。 改变文字inn...
  • shehun11
  • shehun11
  • 2014年10月16日 10:24
  • 1047
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用javascript中innerhtml实现当页动态生成内容
举报原因:
原因补充:

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