基于JavaScript代码实现自动生成表格


Posted in Javascript onJune 15, 2016

废话不多说,直接给大家贴js代码了,具体代码如下所示:

//js实现输入表格行数、列数自动生成表格源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动创建表格</title>
<style type="text/css">
table{
width:300px;
height:100px;
border:#0C9 1px solid;
border-collapse:collapse;
}
</style>
<script type="text/javascript" language="javascript">
function autocreate(){
//创建table表格
var table=document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("background","red");
//获取行数值
var line=document.getElementById("line").value;
//获取列数值
var list=document.getElementById("list").value;
for(var i=0;i<=line;i++){
//alert(line);
//创建tr
var tr=document.createElement("tr");
for(var j=0;j<=list;j++){
//alert(list);
//创建td
var td=document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("d1").appendChild(table);
}
</script>
</head>
<body>
<input type="text" id="line">行数
<input type="text" id="list">列数
<input type="button" value="添加表格" onclick="autocreate()">
<div id="d1" style="height:400px; width:300px;"></div>
</body>
</html>

以上所述是小编给大家介绍的基于JavaScript代码实现自动生成表格的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
javascript prototype 原型链
Mar 12 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
vue router 动态路由清除方式
May 25 Vue.js
JavaScript生成带有缩进的表格代码
Jun 15 #Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 #Javascript
JavaScript仿flash遮罩动画效果
Jun 15 #Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 #Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 #Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 #Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python对wav文件的重采样实例
2020/02/25 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
财务管理专业推荐信
2013/11/19 职场文书
五一家具促销方案
2014/01/10 职场文书
2014年党支部承诺书
2014/05/30 职场文书
图书馆标语
2014/06/19 职场文书
学习十八大演讲稿
2014/09/15 职场文书
项目合作协议书
2014/09/23 职场文书
电影开国大典观后感
2015/06/04 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android