考虑rowpans从javascript数组创建动态表

Question

我想从JSON对象动态创建一个表，我将不得不考虑rowspans。

所以我的数组就像下面那样，然后表会显示Id，Name，Age in td和hobbies，技巧，语言将会跨越行。

我的表格如下所示

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'Id': 7,
      'Name': 'English'
    }]
  }
]

如果有可能的方式看起来像图像中的表有一些CSS，我们也可以考虑。

这就是我的尝试。

＆＃13;

＆＃13;

$(document).ready(function() {
  var myArr = [{
      "Id": 1,
      "Name": 'Ken',
      "Age": '30',
      "Hobbies": [{
        'HobbyId': 1,
        'HobbyName': 'Swimming'
      }, {
        'HobbyId': 2,
        'HobbyName': 'Reading'
      }],
      "Skills": [{
        'SkillId': 1,
        'SkillName': 'PHP'
      }, {
        'SkillId': 2,
        'SkillName': 'MySQL'
      }],
      "Language": [{
        'LangId': 2,
        'LangName': 'English'
      }, {
        'LangId': 3,
        'LangName': 'Chinese'
      }]
    },
    {
      "Id": 2,
      "Name": 'Mike',
      "Age": '20',
      "Hobbies": [],
      "Skills": [],
      "Language": []
    },
    {
      "Id": 3,
      "Name": 'Charlie',
      "Age": '25',
      "Hobbies": [{
        'HobbyId': 5,
        'HobbyName': 'Dance'
      }, {
        'HobbyId': 6,
        'HobbyName': 'Sing'
      }, {
        'HobbyId': 7,
        'HobbyName': 'Writing'
      }],
      "Skills": [],
      "Language": [{
        'Id': 7,
        'Name': 'English'
      }]
    }
  ];


  var table = "<table border=1>";
  for (var i = 0; i < myArr.length; i++) {
    var arrHobies = myArr[i]['Hobbies'];
    var arrSkills = myArr[i]['Skills'];
    var arrLanguage = myArr[i]['Language'];
    var rowspan = Math.max(arrHobies.length, arrSkills.length, arrLanguage.length);
    console.log(rowspan);
    table += "<tr>";
    table += "<td rowspan=" + rowspan + ">" + myArr[i]['Id'] + "</td>";
    table += "<td rowspan=" + rowspan + ">" + myArr[i]['Name'] + "</td>";
    table += "<td rowspan=" + rowspan + ">" + myArr[i]['Age'] + "</td>";
    console.log(arrHobies);
    for (var j = 0; j < arrHobies.length; j++) {

      if (j == 0) {
        table += "<td>" + arrHobies[j]['HobbyId'] + "</td>";
        table += "<td>" + arrHobies[j]['HobbyName'] + "</td>";
      } else {
        table += "<tr>";
        table += "<td>" + arrHobies[j]['HobbyId'] + "</td>";
        table += "<td>" + arrHobies[j]['HobbyName'] + "</td>";
        //table+="</tr>";

      }
      //table+="</tr>";

    }

    for (var k = 0; k < arrSkills.length; k++) {
      if (k == 0) {
        table += "<td>" + arrSkills[k]['SkillId'] + "</td>";
        table += "<td>" + arrSkills[k]['SkillName'] + "</td>";
      } else {
        // table+="<tr>";
        table += "<td>" + arrSkills[k]['SkillId'] + "</td>";
        table += "<td>" + arrSkills[k]['SkillName'] + "</td>";
        table += "</tr>";

      }
      table += "</tr>";

    }

    table += "</tr>";
  }
  table += "</table>";
  console.info(table);
  $("#myDiv").html(table);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

＆＃13;

＆＃13;

＆＃13;