使用jQuery JSON在每次第n次迭代后创建新的表行

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

$(document).ready(function() {
  // 定义JSON数据
  var jsonData = [
    { "name": "John", "age": 25, "country": "USA" },
    { "name": "Jane", "age": 30, "country": "Canada" },
    { "name": "Tom", "age": 28, "country": "UK" },
    { "name": "Emily", "age": 32, "country": "Australia" },
    { "name": "Michael", "age": 27, "country": "Germany" }
  ];

  // 定义每次第n次迭代后创建新表行的n值
  var n = 2;

  // 迭代JSON数据并添加表行
  $.each(jsonData, function(index, data) {
    var row = $("<tr></tr>"); // 创建表行元素
    $("<td></td>").text(data.name).appendTo(row); // 创建并添加姓名单元格
    $("<td></td>").text(data.age).appendTo(row); // 创建并添加年龄单元格
    $("<td></td>").text(data.country).appendTo(row); // 创建并添加国家单元格
    
    // 每次第n次迭代后创建新的表行
    if ((index + 1) % n === 0) {
      row.addClass("new-row"); // 添加自定义类名以便样式设置
    }

    row.appendTo("#myTable tbody"); // 将表行添加到表格中
  });
});