JavaScript实现动态生成表格


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下

功能描述

在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
javascript实现京东登录显示隐藏密码
Aug 02 #Javascript
Vue scoped及deep使用方法解析
Aug 01 #Javascript
Vue中computed及watch区别实例解析
Aug 01 #Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 #Javascript
vue 组件简介
Jul 31 #Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
You might like
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
求职简历自荐信
2013/10/20 职场文书
社区工作者先进事迹
2014/01/18 职场文书
个人先进事迹材料
2014/12/29 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书