基于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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python DataFrame 取差集实例
2019/01/30 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python异步Web框架sanic的实现
2020/04/27 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
应届生自我鉴定
2013/12/11 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
记者节感言
2015/08/03 职场文书
上班旷工检讨书
2015/08/15 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
保险公司增员口号
2015/12/25 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers