JavaScript实现动态生成表格
作者:veejaLiu 发布时间:2024-04-10 10:54:05
标签:js,表格
本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下
功能描述
在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示:
分析
HTML界面设计
<body>
行:<input type="text" id="row" />
列: <input type="text" id="col" />
<input type="button" name="go" id="go" value="go" onclick="add()" />
<br /><br />
<div id="table"> </div>
</body>
js代码部分:
先得到输入的行和列的值
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
生成表格,新建一个字符串str,把表格的html代码追加进去,先循环行,再循环列,生成一个一个的单元格。
var str += '<table border="1" >';
for(var i = 0; i < row; i++) {
str += '<tr>';
for(var j = 0; j < col; j++) {
str += '<td height="30px" width="100px"></td>';
}
str += '</tr>';
}
str += '</table>';
获取上面的盛放表格的盒子对象,并向里面添加内容。
var divobj = document.getElementById("table");
divobj.innerHTML = str;
代码
<body>
行:<input type="text" id="row" />
列: <input type="text" id="col" />
<input type="button" name="go" id="go" value="go" onclick="add()" />
<br /><br />
<div id="table"> </div>
</body>
<script type="text/javascript">
function add() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
//alert(row + "*" + col);
var str = "";
//alert(str);
str += '<table border="1" >';
for(var i = 0; i < row; i++) {
str += '<tr>';
for(var j = 0; j < col; j++) {
str += '<td height="30px" width="100px"></td>';
}
str += '</tr>';
}
str += '</table>';
var divobj = document.getElementById("table");
divobj.innerHTML = str;
}
</script>
来源:https://blog.csdn.net/u014565127/article/details/89386715
0
投稿
猜你喜欢
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮,能让浏览用户在发现一篇有价值的文章时,可以通过社会化网络快速分享给自己的好友,
- 在程序运行的过程中,如果发生了错误,可以事先约定返回一个错误代码,这样,就可以知道是否有错,以及出错的原因。在操作系统提供的调用中,返回错误
- 在我们的生活中,需要接触大量的带有机械按键的物品。当你用手指按下按键的时候。都会或强或弱的感受一股(嗯,也有可能是一丝丝)反作用力传递到你手
- 使用jmail组件发送邮件:Function JMail(Send_From,Send_To,Send_Subject,Send_
- 代码如下:登陆时记录cookies页面代码 <!--#include file="md5.asp"--&
- 目录什么是预处理?那么预处理有啥好处?Go实现 MySQL 的事务sqlx使用gin + mysql + rest full api&nbs
- PIL:使用python自带图像处理库读取出来的图片格式numpy:使用python-opencv库读取出来的图片格式tensor:pyto
- 哈希数据类型的创建与数据的添加 - hmset利用 “redis-py” 模块实现 &ldq
- 本文实例为大家分享了python opencv实现图像矫正的具体代码,供大家参考,具体内容如下问题简介一般的我们对图像中的目标进行分析和检测
- 前言new = old[:]Python老鸟都知道以上代码是什么意思。它复制列表old到new。它对于新手来说是种困惑而且应该避免使用这种方
- 如果在子类中需要父类的构造方法就需要显式地调用父类的构造方法,或者不重写父类的构造方法。子类不重写 __init__,实例化子类时,会自动调
- 为了得到更加清晰的图像我们需要通过技术对图像进行处理,比如使用对比度增强的方法来处理图像,对比度增强就是对图像输出的灰度级放大到指定的程度,
- 本文实例讲述了mysql中GROUP_CONCAT的使用方法。分享给大家供大家参考,具体如下:现在有三个表,结构如下:cate表:CREAT
- 上期回顾:亚马逊购物用户体验分析 (二)方便的导航元素任何网上商店的成功,至关重要的一点,就是用户可以简单轻松地使用导航条。基本店铺分类,用
- 使用Python读取解析xmind文件,一键统计测试用例数量。问题:做测试的朋友们经常会用到xmind这个工具来梳理测试点或写测试用例,但是
- Pandas Shift函数基础在使用Pandas的过程中,有时会遇到shift函数,今天就一起来彻底学习下。先来看看帮助文档是怎么说的:&
- 3. 迭代器3.1. 迭代器(Iterator)概述迭代器是访问集合内元素的一种方式。迭代器对象从集合的第一个元素开始访问,直到所有的元素都
- 我们经常见到很多网站留言系统的显示访客的IP地址都是隐藏了一部分,以达到隐蔽访客真实地理位置的功能。如:111.222.333.*,当然在系
- 使用Northwind 数据库首先查询Employees表查询结果:city列里面只有5个城市使用ROW_NUMBER() OVER(PAR
- 1 前言在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一