javascript - 动态附加多个TR

我有以下数组：

arr = [{
  "ID": 1,
  "animals": {
    "dog": {
      "color": "brown",
      "age": 5
    },
    "cat": {
      "color": "white",
      "age": 3
    }
  }
}, {
  "ID": 2,
  "animals": {
    "cat": {
      "color": "black",
      "age": 7
    }
  }
}, {
  "ID": 3,
  "animals": {
    "mouse": {
      "color": "white",
      "age": 1
    },
    "dog": {
      "color": "black",
      "age": 9
    },
    "cat": {
      "color": "grey",
      "age": 4
    }
  }
}]

我需要用这张桌子做一下：



或作为代码：

<table border="1" id="myTab">
  <tr>
    <td>ID</td>
    <td>Animal</td>
    <td>Color</td>
    <td>Age</td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>cat</td>
    <td>3</td>
    <td>white</td>
  </tr>
  <tr>
    <td>dog</td>
    <td>5</td>
    <td>brown</td>
  </tr>
  <tr>
    <td rowspan="1">2</td>
    <td>cat</td>
    <td>7</td>
    <td>black</td>
  </tr>
  <tr>
    <td rowspan="3">3</td>
    <td>mouse</td>
    <td>1</td>
    <td>white</td>
  </tr>
  <tr>
    <td>dog</td>
    <td>9</td>
    <td>black</td>
  </tr>
  <tr>
    <td>cat</td>
    <td>4</td>
    <td>grey</td>
  </tr>
</table>

Here我学习了正确的方法来合并多个tr。

但是，在我的示例中，它仍然行不通：

$.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;
        }
      });
    }
  });
  $('#myTab > tbody:last-child').append('<tr>' + tr + '</tr>');
});

Here is a fiddle。

最佳答案

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
arr = [{
  "ID": 1,
  "animals": {
    "dog": {
      "color": "brown",
      "age": 5
    },
    "cat": {
      "color": "white",
      "age": 3
    }
  }
}, {
  "ID": 2,
  "animals": {
    "cat": {
      "color": "black",
      "age": 7
    }
  }
}, {
  "ID": 3,
  "animals": {
    "mouse": {
      "color": "white",
      "age": 1
    },
    "dog": {
      "color": "black",
      "age": 9
    },
    "cat": {
      "color": "grey",
      "age": 4
    }
  }
}]

function getAttr(obj) {
 var props;
 for (var prop in obj) {
    props += '<td>'+obj[prop]+'</td>';
  }
  return props;
}

function extractChildren(animal,obj) {
    return '<td>'+animal+'</td>' + getAttr(obj) + '';
}
function addRows() {
  for(var i=0; i<arr.length; i++) {
    var children = [];
    var rows = 0;

    for (var prop in arr[i].animals) {
      rows++;
      children.push(extractChildren(prop,arr[i].animals[prop]));
    }
    $('#tbl tbody').append(
    `<tr>
        <td rowspan="`+rows+`">`+ arr[i].ID+ `</td>`+children[0]+`
    </tr>`
    );
    children.shift();
    for(var j=0; j<children.length; j++) {
        $('#tbl tbody').append(`<tr>`+children[j]+`</tr>`);
    }
    }
}
$( document ).ready(function() {
    addRows();
});
</script>
<table id="tbl" border="1">
  <thead>
    <th>ID</th>
    <th>Animal</th>
    <th>Colour</th>
    <th>Age</th>
  </thead>
  <tbody>
  </tbody>