基于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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
vuex的module模块用法示例
Nov 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
python中assert用法实例分析
2015/04/30 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
关爱残疾人演讲稿
2014/05/24 职场文书
法定授权委托证明书
2014/09/27 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
会议室管理制度范本
2015/08/06 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
七年级话题作文之执着
2019/11/19 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang