JQuery问题求大神指点

图片说明
这个题是怎么做的???

jquery版本如下:

var people=[{"name":"1111","email":"eeeee","phone":"112323423"},{"name":"2222","email":"33ddddd","phone":"4444444"}];

var thead=$("<thead></thead>");
var tbody=$("<tbody></tbody>");
var table=$("<table></table>");

thead.append("<tr><th>Name</th><th>Email</th><th>Phone</th></tr>");

people.forEach(function(item){
tbody.append("

"+item.name+""+item.email+""+item.phone+"");
});
table.append(thead).append(tbody);

table.css({"border-collapse":"collapse"}).find("td,th").css({border:"1px solid"});

$("body").append(table);

你还是来一张正着的图吧


    var d = { people: [{ name: 'name1', email: 'email1', phone: 'phone1' }, { name: 'name2', email: 'email2', phone: 'phone2' }] }
    document.write('<table border="1"><tr><td>Name</td><td>Email</td><td>Phone</td></tr>');
    for (var i = 0; i < d.people.length; i++)
        document.write('<tr><td>' + d.people[i].name + '</td><td>' + d.people[i].email + '</td><td>' + d.people[i].phone + '</td></tr>')

    document.write('</table>');

var obj = {
people: [
{ name: 'name1', email: 'email1', phone: 'phone1' },
{ name: 'name2', email: 'email2', phone: 'phone2' },
{ name: 'name3', email: 'email3', phone: 'phone3' },
{ name: 'name4', email: 'email4', phone: 'phone4' },
]
};
var table = document.createElement("table");
table.setAttribute("border", "1");
var title = table.insertRow(0);
title.insertCell(0).innerHTML = "name";
title.insertCell(1).innerHTML = "email";
title.insertCell(2).innerHTML = "phone";
for(var i = 0; i < obj.people.length; i ++){
var row = table.insertRow(i + 1);
row.insertCell(0).innerHTML = obj.people[i].name;
row.insertCell(1).innerHTML = obj.people[i].email;
row.insertCell(2).innerHTML = obj.people[i].phone;
}
document.body.appendChild(table);