基于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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JS 控制CSS样式表
Aug 20 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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文件上传的简单实例
2013/10/19 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
python实现备份目录的方法
2015/08/03 Python
Python AES加密模块用法分析
2017/05/22 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
客服专员岗位职责
2014/02/28 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
保密工作整改报告
2014/11/06 职场文书
2015年导购员工作总结
2015/04/25 职场文书
感谢师恩主题班会
2015/08/17 职场文书
《雷雨》教学反思
2016/02/20 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
python实现学生信息管理系统(面向对象)
2022/06/05 Python