javascript - 动态追加多个TR

Question

我有以下数组:

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 :

或者作为代码:

<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 .

Answer 1

虽然我建议您不要使用动物类型作为属性名称，因为如果您有多个相同类型的动物，而是使用可能名为 type 的属性，则会出现问题> 值为狗、猫等。，使用您现有的条件，您可以像下面这样做。

此外，我建议您先写入内存中的变量，然后再向 DOM 执行一次附加操作。

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
        }
    }
}]

var rowspanTemplate = '<tr><td rowspan="{0}">{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>'
var simpleTemplate = '<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>'
var $newRows = $('<div></div>');

$.each(arr, function(key, value) {
    var newRow;
    var animalTypes = Object.keys(value.animals);
    var i;
    var animalType;

    for (i = 0; i < animalTypes.length; i++) {
        animalType = animalTypes[i];

        if (i === 0) {
            newRow = rowspanTemplate
                .replace('{0}', animalTypes.length)
                .replace('{1}', value.ID)
                .replace('{2}', animalType)
                .replace('{3}', value.animals[animalType].color)
                .replace('{4}', value.animals[animalType].age)
        } else {
            newRow = simpleTemplate
                .replace('{0}', animalTypes[i])
                .replace('{1}', value.animals[animalType].color)
                .replace('{2}', value.animals[animalType].age)
        }

        $newRows.append($(newRow));
    }
})

$('#myTab').append($newRows.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTab">
  <tr>
    <td>ID</td>
    <td>Animal</td>
    <td>Color</td>
    <td>Age</td>
  </tr>
</table>