本文实例讲述了JS实现动态生成html table表格的方法。分享给大家供大家参考，具体如下：
刚在论坛上面逛的时候看到有人问html表格怎么动态生成，我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊，于是决定写个博来解救万千小伙伴于水火之中（mdzz）
首先我们要在html里面有如下代码：
<table> <tbody id="tbody1"> </tbody> </table>
如果想在table里面加其他的可以随便加（如加一个表头等等），只需要知道等会js动态生成的内容全部会在tbody里面就可以了。
然后需要如下的js来动态生成html：
function creatTable(data){
//这个函数的参数可以是从后台传过来的也可以是从其他任何地方传过来的
//这里我假设这个data是一个长度为5的字符串数组 我要把他放在表格的一行里面，分成五列
var tableData="<tr>"
//动态增加5个td,并且把data数组的五个值赋给每个td
for(var i=0;i<data.length;i++){
tableData+="<td>"+data[i]+"</td>"
}
tableData+="</tr>"
//现在tableData已经生成好了，把他赋值给上面的tbody
$("#tbody1").html(tableData)
}
上面的那个tableData可以随意加html语言，例如我们给tr设置一下宽度，把var tableData=""改为：
var tableData="<tr style='width:300px'>"
需要注意的是因为我们在给tableData赋值的时候已经用了双引号，所以我们在设置style的时候要全部用单引号，不然就会报错，这个大家应该都知道，就不多说了。
最后就是在页面调用上面写的函数来给表格动态添加数据啦。或者我们也可以让页面在加载的时候就自动给表格动态添加数据：
<script type="text/javascript">
window.onload()=function ()
{
//这个里面复制上面creatTable函数的内容
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript动态改变HTML页面元素例如添加或删除
- js 动态创建 html元素
- JS自动生成动态HTML验证码页面
- 用javascript动态注释掉HTML代码
- JS简单实现动态添加HTML标记的方法示例
- 详解js的事件处理函数和动态创建html标记方法
- JS函数修改html的元素内容,及修改属性内容的方法
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
- JavaScript简单实现动态改变HTML内容的方法示例
