基于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 相关文章推荐
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
vue组件学习教程
2017/09/09 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
详解python的几种标准输出重定向方式
2016/08/15 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
军训考核自我鉴定
2014/02/13 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Python字符串常规操作小结
2022/04/03 Python