javascript - 加入和着色 TR

Question

我有以下结构:

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

我想将其显示为下表:

---

一些注意事项:

• 每只动物的属性(名称、年龄)由管道 | 后跟 id 标识:

  • name|1 和 age|1 是第一只动物的属性(例如 dog1)
  • name|2 和age|2 是第二只动物(如dog2)的属性

• 当没有管道时，如上一个例子，将只有 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>');
});

但这并没有帮助。

Here is a fiddle .

Answer 1

这个数据集很疯狂 :D 但这是你的答案:

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

const createTable = (data) => {
  data = data.sort((x, y) => x.ID - y.ID)
  data.forEach(x => {
    const obj = {}
    for (let animalType in x.Animals) {
      obj[animalType] = []
      const animaliInfo = x.Animals[animalType]
      const animaliInfoKeys = Object.keys(x.Animals[animalType])
      for (let i = 0; i < animaliInfoKeys.length; i += 2) {
        obj[animalType].push({
          name: animaliInfo[animaliInfoKeys[i]],
          age: animaliInfo[animaliInfoKeys[i + 1]],
          number: (animaliInfoKeys[i].match(/\d+/) || [])[0] || ""
        })
      }
    }
    x.Animals = obj
    return x
  })

  const table = document.createElement('table')
  {
    let tr = document.createElement('tr');
    ['ID', 'Country', 'Animals','Name','Age'].forEach(x => {
      const td = document.createElement('td')
      td.innerText = x
      tr.appendChild(td)
    })
    table.append(tr)
    }
  for (const x of data) {
    let rowspam = 0
    let firstTr
    for (const animals in x.Animals) {
      for (const animal of x.Animals[animals]) {
        const tr = document.createElement('tr')
        if (!firstTr) {
          firstTr = tr
        }
        const typeAndNumber = document.createElement('td')
        typeAndNumber.innerText = animals + animal.number
        const name = document.createElement('td')
        name.innerText = animal.name
        const age = document.createElement('td')
        age.innerText = animal.age

        tr.appendChild(typeAndNumber)
        tr.appendChild(name)
        tr.appendChild(age)
        table.appendChild(tr)
        rowspam++
      }
    }
    const ID = document.createElement('td')
    const country = document.createElement('td')

    const firstTd = firstTr.children[0]
    ID.innerText = x.ID
    country.innerText = x.Country
    ID.rowSpan = rowspam
    country.rowSpan = rowspam
    firstTr.insertBefore(ID, firstTd)
    firstTr.insertBefore(country, firstTd)
  }
  return table
}
const table = createTable(data)
table.border = "1"
document.body.appendChild(table)

<!DOCTYPE html>
<html>
  <head>
    <title></title>

    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

工作原理:

setp 1 按 ID 排序。
第 2 步将 Alminals 对象更改为对象数组。
第 3 步创建 DOM 元素。