Put JS объект в HTML <table>

Question

У меня есть HTML <form>, который собирает 5 различных типов данных, это становится место в объекте Javascript, который выглядит следующим образом:

var memberObj = [ 
    { 
    name: "testname", 
    prof: "profession", 
    level: 0, 
    guild: "guild", 
    server: "server", 
    } 
]; 

То, что я хочу, чтобы это принять эти свойства объектов и место, то в таблицу, которая выглядит следующим образом:

<table class="table table-striped" id="memberList"> 
    <tr> 
    <th>Character name</th> 
    <th>Profession</th> 
    <th>Level</th> 
    <th>Guild</th> 
    <th>Server</th> 
    </tr> 
</table> 

Я в принципе хочу, чтобы создать новый <tr> для каждого объекта и новый <td> для каждого object.property.

Как мне это сделать? Я оглянулся вокруг Stack Overflow, но не нашел ничего, что помогло мне.

Answer 1

Просто используйте две петли for, чтобы перебирать объекты, а затем столбцы. append функция Использовать JQuery для добавления HTML-код в таблицу

var cols = ['name', 'prof', 'level', 'guild', 'server']; 

for (var i = 0; i < memberObj.length; i++) { 
    $('table').append('<tr></tr>'); 

    for (var j = 0; j < cols.length; j++) { 
    $('table tr:last-child').append('<td>' + memberObj[i][cols[j]] + '</td>'); 
    } 
} 

Заканчивать рабочий JSFiddle