Вот пример динамического создания HTML-таблицы с использованием JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table</title>
</head>
<body>
<script>
// Create an array of data
var data = [
{ name: "John", age: 25, city: "New York" },
{ name: "Jane", age: 30, city: "London" },
{ name: "Mike", age: 35, city: "Paris" }
];
// Create a table element
var table = document.createElement("table");
// Create table header
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
Object.keys(data[0]).forEach(function(key) {
var th = document.createElement("th");
th.textContent = key;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// Create table body
var tbody = document.createElement("tbody");
data.forEach(function(item) {
var row = document.createElement("tr");
Object.values(item).forEach(function(value) {
var td = document.createElement("td");
td.textContent = value;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
// Append the table to the body
document.body.appendChild(table);
</script>
</body>
</html>
Этот код создает простую HTML-таблицу с тремя столбцами (имя, возраст, город) и тремя строками данных. Таблица создается динамически с помощью JavaScript путем создания необходимых элементов и добавления их в DOM.