基于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 相关文章推荐
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
Webpack3+React16代码分割的实现
Mar 03 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
Zend 输出产生XML解析错误
2009/03/03 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Python 对象中的数据类型
2017/05/13 Python
python实现windows下文件备份脚本
2018/05/27 Python
python绘制热力图heatmap
2020/03/23 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python谱减法语音降噪实例
2019/12/18 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
用python批量下载apk
2020/12/29 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
保险经纪人求职信
2014/03/11 职场文书
查摆问题整改措施
2014/10/24 职场文书
感恩教育主题班会
2015/08/12 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers