基于JavaScript代码实现自动生成表格
更新时间：2016年06月15日 10:43:58 投稿：mrr
本文给大家分享一段js代码实现输入表格行数、列数自动生成表格源代码，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
废话不多说，直接给大家贴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 如何将 HTML 转成 Markdown
这篇文章主要介绍了一文详解JavaScript如何将HTML转成Markdown，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架,这篇文章主要给大家介绍了关于JS中八种数据类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
Bootstrap实现基于carousel.js框架的轮播图效果
这篇文章主要为大家详细介绍了Bootstrap实现基于carousel.js框架的轮播图效果，无过渡动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了javascript事件模型用法,实例分析了事件模型、事件对象、事件监听器及事件传递的定义与使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了Javascript函数技巧学习，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性，并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。2015-05-05
最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。2009-05-05
本文详细讲解了微信小程序实现获取用户信息替换用户名和头像到首页的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
现在手机网站已经很普及了，有时候前端网页需要判断，用户使用的是手机浏览器还是电脑浏览器。这篇文章整理了JavaScript判断是否手机浏览器的五种方法，通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值2022-11-11
一个级联菜单代码学习及removeClass与addClass的应用
最近在学些web前段的知识，看见博客园首页左侧的一个级联菜单,很是好奇，于是想自己实现以下，代码书写很简洁而且易懂，感兴趣的朋友可以了解下，希望本文对你学习级联菜单有所帮助2013-01-01
最新评论