溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何將給定的數據動態加入到創建的表格中？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
創建 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>看完上述內容，你們掌握如何將給定的數據動態加入到創建的表格中的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
