javascript - 创建复杂的表结构

Question

我有以下结构:

[{
  "ID": "1",
  "Country": "Italy",
  "Animals": {
    "dog": {
      "1": {
        "name": "Bailey",
        "age": "5"
      },
      "2": {
        "name": "Charlie",
        "age": "3"
      }
    },
    "cat": {
      "1": {
        "name": "Luna",
        "age": "7"
      },
      "2": {
        "name": "Biscuit",
        "age": "1"
      }
    }
  }
}, {
  "ID": "4",
  "Country": "France",
  "Animals": {
    "cat": {
      "1": {
        "name": "Chloe",
        "age": "8"
      },
      "2": {
        "name": "Jasper",
        "age": "2"
      }
    },
    "mouse": {
      "1": {
        "name": "Skittles",
        "age": "7"
      },
      "2": {
        "name": "Indy",
        "age": "9"
      },
      "3": {
        "name": "Goldie",
        "age": "3"
      }
    }
  }
}, {
  "ID": "6",
  "Country": "Spain",
  "Animals": {
    "cat": {
      "1": {
        "name": "Toby",
        "age": "7"
      },
      "2": {
        "name": "Simba",
        "age": "2"
      }
    }
  }
}, {
  "ID": "9",
  "Country": "Germany",
  "Animals": {
    "mouse": {
      "1": {
        "name": "Crimsin",
        "age": "1"
      }
    }
  }
}]

我想将其显示为下表:

<小时/>

这是我的方法:

$.each(arr, function(key, value) {
  var rowspan = Object.keys(arr[key].Animals).length;

  var tr = "";
  c = 0;
  $.each(value, function(key2, value2) {
    if (key2 != "animals") {
      if (rowspan < 1) {
        rowspan = 1;
      }
      tr += '<td rowspan=' + rowspan + '>' + value2 + '</td>';
    } else {
      $.each(value2, function(key3, value3) {
        var tr2_temp = "";

        tr2_temp += "<td>" + key3 + "</td>";
        $.each(value3, function(key4, value4) {
          tr2_temp += "<td>" + value4 + "</td>";
        });

        if (c == 0) {
          $('#myTab tr:eq(' + parseInt(key + 1) + ')').append(tr2_temp)
          c++;
        } else {
          $('#myTab tr:eq(' + parseInt(key + 1) + ')').after(tr2_temp)
          c = 0;
        }
      });
    }
  });
  console.log(tr)
  $('#myTab > tbody:last-child').append('<tr>' + tr + '</tr>');
});

但这并没有帮助。

有没有办法动态地执行此操作，这样我就不必指定每一列？
请注意，这是一个简化的示例。在实际情况中，还有更多属性。

Answer 1

var arr = [{ "ID": "1", "Country": "Italy", "Animals": { "dog": { "1": { "name": "Bailey", "age": "5" }, "2": { "name": "Charlie", "age": "3" } }, "cat": { "1": { "name": "Luna", "age": "7" }, "2": { "name": "Biscuit", "age": "1" } } } }, { "ID": "4", "Country": "France", "Animals": { "cat": { "1": { "name": "Chloe", "age": "8" }, "2": { "name": "Jasper", "age": "2" } }, "mouse": { "1": { "name": "Skittles", "age": "7" }, "2": { "name": "Indy", "age": "9" }, "3": { "name": "Goldie", "age": "3" } } } }, { "ID": "6", "Country": "Spain", "Animals": { "cat": { "1": { "name": "Toby", "age": "7" }, "2": { "name": "Simba", "age": "2" } } } }, { "ID": "9", "Country": "Germany", "Animals": { "mouse": { "1": { "name": "Crimsin", "age": "1" } } } }];

var $tbody = $('#myTab > tbody:last-child');
arr.forEach(d => {
  var tds = '';
  for (var k in d) {
    if (typeof d[k] !== 'object') {
      var rs = Object.values(d.Animals).map(o => Object.keys(o).length).reduce((v, s) => v + s, 0);
      tds += `<td rowspan="${rs}">${d[k]}</td>`;
    } else {
      for (var kk in d[k])
        Object.values(d[k][kk]).forEach((dd, i) => {
          var tds3 = `<td>${kk + (i+1)}</td>`;
          Object.values(dd).forEach(val => tds3 += `<td>${val}</td>`);
          $tbody.append(`<tr>${tds + tds3}</tr>`);
          tds = '';
        });
    }
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTab">
  <thead><tr><td>ID</td><td>Country</td><td>Animals</td><td>Name</td><td>Age</td></tr></thead>
  <tbody></tbody>
</table>