基于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去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Position属性之relative用法
Dec 14 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
关于webpack代码拆分的解析
Jul 20 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php合并js请求的例子
2013/11/01 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
详解AngularJS中的表格使用
2015/06/16 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
美国购车网站:TrueCar
2016/10/19 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
呐喊读书笔记
2015/06/30 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
Java 多态分析
2022/04/26 Java/Android