基于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代码
Oct 30 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
一些实用性较高的js方法
Apr 19 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
详解webpack性能优化——DLL
Oct 20 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php多任务程序实例解析
2014/07/19 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
浅析JS运动
2015/12/28 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
上班睡觉检讨书
2014/01/09 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016新年感言
2015/08/03 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python