使用JavaScript创建带有JSON的表格

Question

我想使用Javascript创建带有JSON的表格。

1.创建JSON API URL（http://sample.com/getAllItems）

它返回这样的JSON数据;

[{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},{"ID":4,"NAME":"","DEPARTMENT":"","TITLE":"smaple title2","CONTENTS":"sample content2","TYPE":null,"CREATED_AT":"2017-05-01 11:44:44","UPDATED_AT":"0000-00-00 00:00:00"}] 

2.我想使表JSON数据等等..

var apiURL = '/getAllItems'; 
    var data= []; 
    var option = [ 
     {field:"ID",width:10}, 
     {field:"TITLE", width:160}, 
     {field:"CONTENTS", width:420} 
    ]; 

    $.getJSON(apiURL, function (datas) { 
     $.each(datas, function(key, val){ 
      data.push(val); 
     }); 
    }); 

    window.onload = function() { 
     var itemTable = $("#itemTable"); 
     var makeTable = $("<table>").appendTo(itemTable); 
     makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"}); 

     $.each(data, function(index, row) { 
      var makeTr = $("<tr>").appendTo(makeTable); 
      console.log("index : "+index); 
      console.log("row : "+ row); 

      $.each(option, function(i, fieldInfo) { 
       var makeTd = $("<td>").appendTo(makeTr); 
       console.log("Index : "+index); 
       console.log("Row : "+row); 
       console.log("i : "+i); 
       console.log("fieldInfo : "+fieldInfo); 
       console.log("fieldInfo.field : "+fieldInfo.field); 
       console.log("Row[Field] : "+row[fieldInfo.field]); 

       makeTd.html(row[fieldInfo.field]); 
       makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"}); 
      }); 
     }); 
    } 

</script> 

和

其返回

-------------------------------------- 
1 | sample title | sample content 
-------------------------------------- 
2 | sample title2| sample content2 
---------------------------------------- 

我想使用标题单元，但我不能..我怎么能得到这样的表？

-------------------------------------- 
ID | Title  | Content 
-------------------------------------- 
1 | sample title | sample content 
-------------------------------------- 
2 | sample title2| sample content2 
---------------------------------------- 

Answer 1

之前，这里是你可以尝试..希望解释让sense..if什么，你不会得到，请继续和评论.. ：d

var apiURL = '/getAllItems'; 
 
    var data= []; 
 
    var option = [ 
 
     {field:"ID",width:10}, 
 
     {field:"TITLE", width:160}, 
 
     {field:"CONTENTS", width:420} 
 
    ]; 
 

 
//commented your Ajax for testing. 
 

 
    /*$.getJSON(apiURL, function (datas) { 
 
     $.each(datas, function(key, val){ 
 
      data.push(val); 
 
     }); 
 
    }); 
 
*/ 
 

 
//get the data varable set 
 

 
data = [{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},{"ID":2,"NAME":"","DEPARTMENT":"","TITLE":"smaple title2","CONTENTS":"sample content2","TYPE":null,"CREATED_AT":"2017-05-01 11:44:44","UPDATED_AT":"0000-00-00 00:00:00"}]; 
 

 

 
//begin creating table on load. 
 
window.onload = function() { 
 
     
 
     //create table element. 
 
     var makeTable = $("<table>"); 
 
     //append table to existing div here it have class "test". 
 
     $(".test").append($(makeTable)); 
 
     //append first row for headings. 
 
     $(makeTable).append($("<tr>")); 
 
     
 
     //append all heading in loop. 
 
     $.each(option,function(i,dt){ 
 
      //simply find first tr and append td with content to it. 
 
      $(makeTable).find("tr").append("<td>"+dt["field"]+"</td>"); 
 
     }); 
 
    
 
     // start appending data. 
 
     $.each(data,function(i,row){ 
 
     //find tbody in table and add tr to it. 
 
      var nrow = $(makeTable).find('tbody').append("<tr>"); 
 
     //for each options find its value in data and append to newly created tr above. 
 
      $.each(option,function(j,dt){ 
 
       // this is actually what you want.. 
 
       $(nrow).append("<td>"+row[dt["field"]]+"</td>"); 
 
      }); 
 
     }); 
 
    } 
 

 
    //done.

table,td 
 
{ 
 
border: 1px #CCC solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="test"> 
 
</div>

Answer 2

var makeTh = $("<th>").appendTo(makeTable); 
$.each(option, function (index, row) { 
    var makeTd = $("<td>").append(makeTh); 
    makeTd.css({width, row['width']}).html(row['field']); 
}); 

尝试在第一$.each添加代码。

Answer 3

您必须添加一行标题你的循环开始

var apiURL = '/getAllItems'; 
    var data= []; 
    var option = [ 
     {field:"ID",width:10}, 
     {field:"TITLE", width:160}, 
     {field:"CONTENTS", width:420} 
    ]; 

    $.getJSON(apiURL, function (datas) { 
     $.each(datas, function(key, val){ 
      data.push(val); 
     }); 
    }); 

    window.onload = function() { 
     var itemTable = $("#itemTable"); 
     var makeTable = $("<table>").appendTo(itemTable); 
     var head='<tr><th>ID</th><th>TITLE</th><th>CONTENT</th></tr>'; 
     makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"}); 
      $(head).appendTo(makeTable); 
     $.each(data, function(index, row) { 
      var makeTr = $("<tr>").appendTo(makeTable); 
      console.log("index : "+index); 
      console.log("row : "+ row); 

      $.each(option, function(i, fieldInfo) { 
       var makeTd = $("<td>").appendTo(makeTr); 
       console.log("Index : "+index); 
       console.log("Row : "+row); 
       console.log("i : "+i); 
       console.log("fieldInfo : "+fieldInfo); 
       console.log("fieldInfo.field : "+fieldInfo.field); 
       console.log("Row[Field] : "+row[fieldInfo.field]); 

       makeTd.html(row[fieldInfo.field]); 
       makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"}); 
      }); 
     }); 
    } 

</script>