通過Javascript實現把數組裡的內容以表格方式呈現到頁面從
阿新 • • 發佈：2022-01-18
一、把數組裡的內容呈現到頁面從，以表格方式
<!doctype html> <html> <head> <meta charset="utf-8"> <style> .tb,th,td{ border: 1px solid #CC5D5E; } </style> </head> <body> <table class="tb"> <th>ID</th> <th>姓名</th> <th>年齡</th> </table> <script> var Data=[ {id:1, name:"小米", age:18}, {id:2, name:"小明", age:10}, {id:3, name:"小菜", age:20} ] var tbody=document.querySelector("tbody") Data.forEach(function(i){ //i代表陣列中的每一個物件 //建立一個tr var tr=document.createElement("tr") //迴圈遍歷i物件 for(var key in i){ //建立td標籤 var td=document.createElement("td") //向td標籤裡插入（修改）內容 var cc=td.innerText=i[key] //向tr標籤裡插入td標籤（有內容） tr.appendChild(td) } //向tbody元素裡插入tr標籤 tbody.appendChild(tr) }) </script> </body> </html>
本文來自部落格園，作者：永恆之月TEL，轉載請註明原文連結：https://www.cnblogs.com/akc4/p/15818440.html