要从两个数据集填充表格,并将同一<td>
下的数据进行合并,可以使用JavaScript来实现。以下是一个示例代码,展示了如何实现这一功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并数据示例</title>
</head>
<body>
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- 数据将通过JavaScript动态插入 -->
</table>
<script src="script.js"></script>
</body>
</html>
// 假设这是两个数据集
const dataset1 = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 }
];
const dataset2 = [
{ id: 1, name: 'Alice Smith', age: 26 },
{ id: 3, name: 'Charlie', age: 35 }
];
// 获取表格元素
const table = document.getElementById('myTable');
// 创建一个映射来存储合并后的数据
const mergedData = {};
// 合并数据集
dataset1.concat(dataset2).forEach(item => {
if (!mergedData[item.id]) {
mergedData[item.id] = { ...item };
} else {
// 合并同一ID的数据
mergedData[item.id].name += ` ${item.name.split(' ')[item.name.split(' ').length - 1]}`;
mergedData[item.id].age = item.age;
}
});
// 将合并后的数据插入表格
Object.values(mergedData).forEach(item => {
const row = table.insertRow();
row.insertCell().textContent = item.id;
row.insertCell().textContent = item.name;
row.insertCell().textContent = item.age;
});
dataset1
和dataset2
。concat
方法将两个数据集合并。mergedData
来存储合并后的数据。mergedData
中,则合并该ID下的数据,否则直接添加。这种数据合并的方法适用于需要从多个数据源获取数据并进行合并的场景,例如:
通过这种方式,可以有效地从多个数据集中提取数据并进行合并,确保同一ID下的数据在同一行中显示。
领取专属 10元无门槛券
手把手带您无忧上云