javascript动态生成表格详解
更新时间：2021年10月10日 11:50:41 作者：莎蛋蛋的盖世英雄啊
这篇文章主要介绍了JavaScript动态生成表格的示例，帮助大家更好的理解和使用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>
效果图演示:
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效，快跟随小编一起学习一下吧2022-10-10
这篇文章主要介绍了js+html5实现可在手机上玩的拼图游戏,涉及javascript结合html5进行图形操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了javascript实现跟随鼠标移动的图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
本文给大家分享的是个人刚开始学习javascript的时候写的仿windows经典的扫雷游戏的代码，当时只是写了下来，没加注释，这里补上，有需要的小伙伴可以参考下。2015-04-04
禁止页面刷新让F5快捷键及右键都无效，下面有个不不错的实现方法，大家可以感受下2014-01-01
js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量，这称为闭包(Closure)2008-11-11
JavaScript Event学习第十章 一些可替换的事件对
为了让我们的JavaScript驱动的页面对那些不能或者不想使用鼠标的用户也能很好的使用，我们对于像mouseover和click这样的事件做一些处理，同样的，对于非鼠标事件也同样的要我们的脚本执行。2010-02-02
FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出，用FreeMarker判断对象是否为空的方法大家知道吗，这篇文章就针对这个知道点做介绍，需要的朋友可以参考下2015-08-08
迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现，这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下2022-11-11
最新评论