基于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 学习 - 提高篇
Feb 02 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
js function使用心得
May 10 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
shell程序中如何注释
2012/02/17 面试题
行政助理岗位职责
2013/11/10 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
食品安全演讲稿
2014/09/01 职场文书
民间借贷协议书范本
2014/10/01 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Java详细解析==和equals的区别
2022/04/07 Java/Android
Redis基本数据类型List常用操作命令
2022/06/01 Redis