基于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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
js+canvas实现验证码功能
2020/09/21 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
浅析python的Lambda表达式
2019/02/27 Python
详解django2中关于时间处理策略
2019/03/06 Python
python面试题小结附答案实例代码
2019/04/11 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
技校生自我鉴定
2013/12/08 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
介绍信怎么写
2015/05/05 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏