使用Javascript对象动态创建HTML表,可以通过以下步骤实现:
以下是一个示例代码:
// 表格数据对象
var tableData = {
name: ['John', 'Jane', 'Mike'],
age: [25, 30, 35],
city: ['New York', 'London', 'Tokyo']
};
// 创建table元素
var table = document.createElement('table');
// 创建thead元素
var thead = document.createElement('thead');
table.appendChild(thead);
// 创建表头行
var headerRow = document.createElement('tr');
thead.appendChild(headerRow);
// 创建表头单元格
for (var column in tableData) {
var th = document.createElement('th');
th.textContent = column;
headerRow.appendChild(th);
}
// 创建tbody元素
var tbody = document.createElement('tbody');
table.appendChild(tbody);
// 创建数据行和单元格
for (var i = 0; i < tableData.name.length; i++) {
var dataRow = document.createElement('tr');
tbody.appendChild(dataRow);
for (var column in tableData) {
var td = document.createElement('td');
td.textContent = tableData[column][i];
dataRow.appendChild(td);
}
}
// 将表格添加到页面中的指定位置
document.body.appendChild(table);
这段代码会根据表格数据对象动态创建一个包含表头和数据的HTML表格,并将其添加到页面中的body元素中。你可以根据实际需求修改表格数据对象和添加表格的位置。
领取专属 10元无门槛券
手把手带您无忧上云