JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<div class="content">
</div>
</body>
</html>
CSS
th {
font-weight:bold;
}
td,th {
padding: 5px 10px;
border:1px solid black;
}
JavaScript
$(function() {
//Данные
var TableTitle = ["Site", "Google","Yandex","Bing"];
var TableValue = [
["http://habr.ru/","4","6","26"],
["http://habrahabr.ru/","3","1","6"],
["http://google.ru/","1","1","1"]
];
//Создадим структуру
var mytable = $('<table/>',{
class:'mytable'
}).append(
$('<thead/>'),
$('<tfoot/>'),
$('<tbody/>')
);
//Нополняем табличку
//Заголовок
var TitleCell = $('<tr/>');
$.each(TableTitle,function( myIndex, myData ) {
TitleCell.append(
$('<th/>',{
text:myData
})
);
});
$("thead",mytable).append(TitleCell);
//Данные
$.each(TableValue,function() {
//Переопределяем строку
var DataCell = $('<tr/>');
//Пробегаемся по ячейкам, если они фиксированые можно не использовать цикл, а указать индекс
$.each(this,function() {
DataCell.append(
$('<td/>',{
text:this
})
);
});
$("tbody",mytable).append(DataCell);
});
//Без цикла
$("tbody",mytable).append($('<tr/>').append($("<td/>",{'colspan':'4',text:"Без цикла"})));
$.each(TableValue,function( i, myData ) {
$("tbody",mytable).append(
$('<tr/>').append(
$('<td/>',{text:this[0]}),
$('<td/>',{text:this[1]}),
$('<td/>',{text:myData[2]}), //Или так
$('<td/>',{text:myData[3]})
)
);
});
$('.content').append(mytable);
});