javascript 动态创建表格的2种方法总结
更新时间：2015年03月04日 09:40:50 投稿：hebedich
本文给大家总结了2种使用javascript动态创建表格的方法，非常简单实用，小伙伴们自己对比下看看哪种更适合你呢，一般本人是使用第一种的。
第一种方法：
复制代码 代码如下:
<html>
<head>
<script>
function createTable(rows,lines){
this.rows=rows;
this.lines=lines;
var Body=document.getElementById('body');
var Table=document.createElement('table');//创建table标签元素
Table.setAttribute('border','1');
//给table标签添加其他属性
for(var i=0;i<this.rows;i++){
var lRow=document.createElement('tr');
for(var j=0;j<this.lines;j++){
var textNode=document.createTextNode(i+','+j);
var lLine=document.createElement('td');
lLine.appendChild(textNode);
lRow.appendChild(lLine);
}
Table.appendChild(lRow);
}
Body.appendChild(Table);
}
</script>
</head>
<body >
<div id="body"></div>
</body>
<script type="text/javascript">
createTable(10,10);
</script>
</html>
第二种方法：
复制代码 代码如下:
<script>
function createTable(rows,lines){
this.rows=rows;
this.lines=lines;
var Body=document.getElementById('body');
var Table=document.createElement('table');
Table.setAttribute('border',1);
for(var i=0;i<this.rows;i++){
var row=Table.insertRow(i);
for(var j=0;j<this.lines;j++){
var cells=row.insertCell(j);
cells.innerHTML=i+','+j
}
}
Body.appendChild(Table);
}
</script>
以上2种方法小伙伴们是否都了解了呢，如有更好的方法，也请大家留言说明下，大家共同进步。
相关文章
这篇文章主要介绍了js实现前端跨域postMessage的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了JS版元素周期表实现方法,可实现基于javascript动态生成元素周期表的功能,点击元素项可以在下方显示对应元素的各种常用属性,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了async与await异步编程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本文2017-08-08
这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的相关内容，文中详细介绍了前端+PHP后端的示例代码，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
封装的dialog插件 基于bootstrap模态对话框的简单扩展
这篇文章主要介绍了基于bootstrap模态对话框的简单扩展，bootstrap-mzDialog插件的封装，感兴趣的小伙伴们可以参考一下2016-08-08
sort()方法主要是用于对数组进行排序，默认情况下该方法是将数组元素转换成字符串，然后按照ASC码进行排序，这个大家都能理解，但如果数组元素是一个Object呢，转不了字符串，难道不能进行排序？答案当然是否定的,那么我们就来详细探讨下sort()方法的使用2015-08-08
Maps Javascript...2007-01-01
这篇文章主要为大家介绍了Webpack中Source Map配置深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论