基于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 相关文章推荐
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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数组的使用方法小结
2010/09/23 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
深入解析php之apc
2013/05/15 PHP
php实现图片缩略图的方法
2016/03/29 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python中map()与zip()操作方法
2016/02/27 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
初一家长会邀请函
2014/01/31 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
六五普法学习心得体会
2016/01/21 职场文书