本篇文章给大家带来的内容是关于将给定的数据动态加入到创建的表格中（源代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
思路：
创建 table + thead + tbody
创建 tr + th
创建每一行的 tr + td
加到页面中
注：最后再加到页面中的原因是每将一个元素加到页面一次，页面便会刷新一次，因此先在内存中创建好表格再一次性的加到页面中，页面只需刷新一次，减少性能的损失。
Title var data = [ { name : "jim1", age : 18, gender : "male"}, { name : "jim2", age : 19, gender : "female"}, { name : "jim3", age : 20, gender : "female"}, { name : "jim4", age : 21, gender : "male"} ]; function createElement( tag ) { return document.createElement( tag ); } var table = createElement( "table" ); var thead = createElement( "thead" ); var tbody = createElement( "tbody" ); table.appendChild( thead ); table.appendChild( tbody ); var trhead = createElement( "tr" ); thead.appendChild( trhead ); for ( var k in data[ 0 ] ){ th = createElement( "th" ); th.appendChild( document.createTextNode( k ) ); trhead.appendChild( th ); } for ( var i = 0; i < data.length; i++){ var tr = createElement( "tr" ); for ( var j in data[ i ]){ td = createElement( "td" ); td.appendChild( document.createTextNode( data[i][j] )); tr.appendChild( td ); } tbody.appendChild( tr ); } //table.setAttribute("border","1px"); //或直接设置table.border = "1px";两者等价。 table.border = "1px"; table.cellspadding = 0; table.setAttribute("align","center"); table.style.textAlign = "center"; table.setAttribute("borderColor","skyBlue"); table.setAttribute("cellspacing",0); document.body.appendChild( table );
以上就是对将给定的数据动态加入到创建的表格中（源代码）的全部介绍，本文内容紧凑，希望大家可以有所收获，更多请关注PHP中文网。
以上就是将给定的数据动态加入到创建的表格中（源代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547234.html
微信扫一扫 
支付宝扫一扫 
