基于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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python 垃圾收集机制的实例详解
2017/08/20 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
自我评价范文分享
2014/01/04 职场文书
公益广告标语
2014/06/19 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
小学新教师个人总结
2015/02/05 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
迎新年主持词
2015/07/06 职场文书
四则混合运算教学反思
2016/02/23 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Python selenium的这三种等待方式一定要会!
2021/06/10 Python