json table

jsonObj={
  'id':'tableid',
  'classname':'tableclass',
  'th':[
   {'id':'th1','text':'F1'},
{'id':'th2','text':'F2'},
{'id':'th3','classname':'tdclass1','text':'F3'}
],
  'td':[
   [{'id':'td1','text':'d1'},{'id':'td1','text':'d1'},{'id':'td1','text':'d1'}],
   [{'id':'td1','text':'d1'},{'id':'td1','classname':'tdclass1','text':'d1'},{'id':'td1','text':'d1'}],
   [{'id':'td1','text':'d1'},{'id':'td1','text':'d1'},{'id':'td1','text':'d1'}],
   [{'id':'td1','text':'d1'},{'id':'td1','text':'d1'},{'text':'d1'}]
]
  };
///使用方法 createTableByJson(div id,json);
createTableByJson('tableTest',jsonObj);
function createTableByJson(divid,jsonObj){
  var ourDiv=document.getElementById(divid);
  var t=document.createElement('table');
  if(jsonObj.id){
   t.setAttribute("id",jsonObj.id);
  }
  if(jsonObj.classname){
   t.setAttribute("class",jsonObj.classname);
   t.setAttribute("className",jsonObj.classname);
  }
  var tb=document.createElement('tbody');
  var tr=document.createElement('tr');
  /// add th
  for(var i=0;i<jsonObj.th.length;i++){
   var thText=document.createTextNode(jsonObj.th[i].text);
   var th=document.createElement('th');
if(jsonObj.th[i].id){
  th.setAttribute('id',jsonObj.th[i].id);
}
if(jsonObj.th[i].classname){
  th.setAttribute('class',jsonObj.th[i].classname);
  th.setAttribute('className',jsonObj.th[i].classname);
}
   th.appendChild(thText);
   tr.appendChild(th);
  }
  tb.appendChild(tr);
  /// add td
  for(var j=0;j<jsonObj.td.length;j++){
   tr=document.createElement('tr');
   for(var i=0;i<jsonObj.td[j].length;i++){
     var tdText=document.createTextNode(jsonObj.td[j][i].text);
     var td=document.createElement('td');
  if(jsonObj.td[j][i].id){
    td.setAttribute('id',jsonObj.td[j][i].id);
  }
  if(jsonObj.td[j][i].classname){
    td.setAttribute('class',jsonObj.td[j][i].classname);
    td.setAttribute('className',jsonObj.td[j][i].classname);
  }
     td.appendChild(tdText);
     tr.appendChild(td);
   }
   tb.appendChild(tr);
  }
  t.appendChild(tb);
  ourDiv.appendChild(t);
}


原文地址:https://www.cnblogs.com/HeroBeast/p/1307963.html