如何使用jquery创建带有json对象的动态表

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<div id="table-container"></div>

var data = [
  { name: "John", age: 25, city: "New York" },
  { name: "Jane", age: 30, city: "London" },
  { name: "Bob", age: 35, city: "Paris" }
];

var table = $("<table>").addClass("dynamic-table");
var thead = $("<thead>").appendTo(table);
var tbody = $("<tbody>").appendTo(table);

// 创建表头
var headerRow = $("<tr>").appendTo(thead);
$.each(data[0], function(key, value) {
  $("<th>").text(key).appendTo(headerRow);
});

// 创建表格内容
$.each(data, function(index, item) {
  var row = $("<tr>").appendTo(tbody);
  $.each(item, function(key, value) {
    $("<td>").text(value).appendTo(row);
  });
});

// 将表格添加到容器中
$("#table-container").append(table);