本篇文章给大家带来的内容是关于将给定的数据动态加入到创建的表格中（源代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
思路：创建 table + thead + tbody
创建 tr + th
创建每一行的 tr + td
加到页面中
注：最后再加到页面中的原因是每将一个元素加到页面一次，页面便会刷新一次，因此先在内存中创建好表格再一次性的加到页面中，页面只需刷新一次，减少性能的损失。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title></head><body></body><script> 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 );</script></HTML> 总结 以上是内存溢出为你收集整理的将给定的数据动态加入到创建的表格中（源代码）全部内容，希望文章能够帮你解决将给定的数据动态加入到创建的表格中（源代码）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）