DOM动态创建表格

//json是服务器端直接发过来的数据
var json='[{"ename":"Tom", "salary":3500, "age":25},{"ename":"John", "salary":3800, "age":28},{"ename":"Mary", "salary":3600, "age":25}]';
var data=eval(json);//将json字符串，转为数组对象
console.log(data);
window.onload=function(){//创建一个空table对象,保存在变量table中
  var table=document.createElement("table");//创建一个空thead对象，保存在变量thead中
  var thead=document.createElement("thead");//将thead追加到table下
  table.appendChild(thead);//创建一个空tr对象，保存在变量tr中
  var tr=document.createElement("tr");//将tr追加到thead下
  thead.appendChild(tr);//遍历data中第一对象的每个属性
  for(var key in data[0]){// 创建一个空th，保存在变量th中
    var th=document.createElement("th");// 将th追加到tr下
    tr.appendChild(th);//  设置th的内容为当前属性名
    th.innerHTML=key;
  }
  var tbody=document.createElement("tbody");//创建空tbody对象，保存在变量tbody中
  table.appendChild(tbody);//将tbody追加到table对象下
  for(var i=0;i<data.length;i++){//遍历data数组中每个对象
    var tr=document.createElement("tr");// 每遍历一个对象就创建一个空tr对象，保存在tr中
    tbody.appendChild(tr);// 将tr追加到tbody下
    for(var key in data[i]){// 遍历data数组中当前对象的每个属性
      var td=document.createElement("td");//  每遍历一个属性就创建一个空的td对象，保存在td中
      tr.appendChild(td);//   将td追加到tr下
      td.innerHTML=data[i][key];//  设置td的内容为data中当前对象当前属性的值
    }
  }
  document.getElementById("data").appendChild(table);//找到id为data的元素对象，在其中追加table
}