基于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 showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
javascript实现雪花飘落效果
Aug 19 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
php cli 方式 在crotab中运行解决
2010/02/08 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python pickle模块用法实例
2015/04/14 Python
python实现文本文件合并
2015/12/29 Python
python中的decorator的作用详解
2018/07/26 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
奶茶专卖店创业计划书
2014/01/18 职场文书
商业房地产广告语
2014/03/13 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫