<!DOCTYPE HTML> <html> <head> <title>动态创建表格</title> <meta charset="utf-8" /> <style> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} </style> </head> <body> <div id="data"> <!--table>(thead>tr>th*3)+tbody + tab--> <table> <thead> <tr> <th>ename</th> <th>salary</th> <th>age</th> </tr> </thead> </table> </div> <script> var json=[ {"ename":"Tom", "salary":11000, "age":25}, {"ename":"John", "salary":13000, "age":28}, {"ename":"Mary" , " The salary " : 12000 , " Age " : 25 } ]; // dynamically create parent element tbody var tbody = document.createElement ( " tbody " ); // Do not connect the table appended to the tbody // first memory , all the rows are added tbody // iterate json each employee object for ( var EMP of json) { // each traverse an employee object, create a tr element, and appended to the tbody // var tr = document.createElement ( "tr"); // will be appended to the tr tbody // tbody.appendChild (tr); varTR = tbody.insertRow (); // two above is a simplified // iterate this emp each employee object attribute // attribute name for ( var pname in emp) { // an attribute of each traverse, to create a td var td = document.createElement ( " td " ) // <td> </ td> // and td tr appended to the tr.appendChild (td); // current property value for the current content object td : td.innerHTML = EMP [pname]; // emp.pname; // EMP [ "pname"] } } //Tbody then finally added to the table in disposable document.querySelector ( " table " ) .appendChild (tbody); </ Script > </ body > </ HTML >