基于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经典效果集锦
Jul 06 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
node中的cookie的具体使用
Sep 13 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
react中的DOM操作实现
Jun 30 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文件上传原理简单分析
2011/05/29 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP的拦截器实例分析
2014/11/03 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
python抓取网页内容示例分享
2014/02/24 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python多继承顺序实例分析
2018/05/26 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
详解python的变量缓存机制
2021/01/24 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
在校生党员自我评价
2013/09/25 职场文书
机电工程专业应届生求职信
2013/10/03 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
高一学生评语大全
2014/04/25 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书