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的页面划词搜索JS
Sep 14 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
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 在线翻译函数代码
2009/05/07 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
电子商务应届生求职信
2013/11/16 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
物业经理自我鉴定
2014/03/03 职场文书
洗发露广告词
2014/03/14 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js