javascript - 如何在表格中显示数据？

Question

我正在使用报告生成器，所以我的数据遵循一种格式

[{1:20,2:30,3:40},{1:50,2:10,3:80},{1:70,2:30,3:60}]

听到 1,2,3... 是键，20,30,40,... 是值所以这个数据发送到前端并显示在表格中。

类似表格的格式

1 | 2 | 3
-----------
20| 30| 40
-----------
50| 10| 80
-----------
70| 30| 60
-----------

听说1,2,3,..是table head() 其他是data()

那么如何显示这种格式的数据。

HTML

<table id="example"style="width:100%">
  <thead>
    <tr id = 'title'></tr>
  </thead>
  <tbody>
    <tr id = 'data'></tr>
  </tbody>
</table>

JavaScript 代码

$("#title").html('');
$("#data").html('');
$.each(data, function (key, value) {
  $.each(value, function (key, value) {
     $("#title").append('<th>'+ key +'</th>');
  });
});
$.each(data, function (key, value) {
  $.each(value, function (key, value) {
    $("#data").append('<td>'+ value +'</td>');
  });
});

Answer 1

solution :

$(document).ready(function()
  {
      var data =[{1:20,2:30,3:40},{1:50,2:10,3:80},{1:70,2:30,3:60}];
      console.log(data);
      var th_data = 0; 
      $.each(data, function(index, value1) {
        var tr_str1  = '';
        var tr_str2  = '';
        $.each(value1,function(key,value)
        {
          if(th_data == 0)
          {
            tr_str1 = tr_str1+"<th>"+key+"</th>";
            tr_str2 = tr_str2+"<td>"+value+"</td>";
          }
          else
          {
            tr_str1 = tr_str1+"<td>"+value+"</td>";
          }
        });
        th_data = th_data + 1;
        if(th_data == 1)
        {
          $('table').append("<tr>"+tr_str1+"</tr>"+"<tr>"+tr_str2+"</tr>");
        }
        else
        {
          $('table').append("<tr>"+tr_str1+"</tr>"); 
        }
      });    
  });