javascript - 来自 JSON 的 DOM 表
问题描述
需要帮助如何在表中添加自定义列,例如,第一列需要是列 DIED 之后的 ID 我需要添加列年龄。我尝试在表格中间添加一个名为 Age 的列,但是空地发生了移动,并且该字段显示了应该在父亲列中显示的信息。该表是从 JSON 动态生成的,无需使用 innerHTML。
const ANCESTRY_FILE = [
{
name: "Carolus Haverbeke",
sex: "m",
born: 1832,
died: 1905,
father: "Carel Haverbeke",
mother: "Maria van Brussel"
},
{
name: "Emma de Milliano",
sex: "f",
born: 1876,
died: 1956,
father: "Petrus de Milliano",
mother: "Sophia van Damme"
},
{
name: "Maria de Rycke",
sex: "f",
born: 1683,
died: 1724,
father: "Frederik de Rycke",
mother: "Laurentia van Vlaenderen"
}
];
function showPeople(element, people) {
element = document.querySelector(".people");
let table = document.createElement("table");
table.className = "people__table";
let thead = document.createElement("thead");
let tbody = document.createElement("tbody");
function addThead(table, keys) {
let tr = document.createElement("tr");
for (let i = 0; i < keys.length; i++) {
let td = document.createElement("td");
td.textContent = `${keys[i]}`;
tr.appendChild(td);
}
thead.appendChild(tr);
table.appendChild(thead);
}
for (let i = 0; i < people.length; i++) {
let child = people[i];
if (i === 0) {
addThead(table, Object.keys(child));
}
let tr = document.createElement("tr");
tr.className = "person";
Object.keys(child).forEach(function(elem) {
let td = document.createElement("td");
td.textContent = `${child[elem]}`;
tr.appendChild(td);
});
table.appendChild(tbody);
tbody.appendChild(tr);
}
element.appendChild(table);
}
showPeople("element", ANCESTRY_FILE);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="people"></div>
<script src="script.js"></script>
</body>
</html>
解决方案
这只是一种使用地图和模板的有趣方法。请注意,在我们构建表之前,我们使用一个Array.map
函数来转换我们的 JSON 并将 ID 和 Age 数据添加到对象中。
我不知道你想要什么 ID,但你可以解决这个问题。
const ANCESTRY_FILE = [{
name: "Carolus Haverbeke",
sex: "m",
born: 1832,
died: 1905,
father: "Carel Haverbeke",
mother: "Maria van Brussel"
},
{
name: "Emma de Milliano",
sex: "f",
born: 1876,
died: 1956,
father: "Petrus de Milliano",
mother: "Sophia van Damme"
},
{
name: "Maria de Rycke",
sex: "f",
born: 1683,
died: 1724,
father: "Frederik de Rycke",
mother: "Laurentia van Vlaenderen"
}
];
const buildHeader = (data) => Object.keys(data).map(k => `<th>${k}</th>`).join('');
const buildRow = (data) => Object.keys(data).map(k => `<td>${data[k]}</td>`).join('');
function showPeople(people) {
let element = document.querySelector(".people");
let table = document.createElement("table");
table.classList.add("people__table");
let thead = document.createElement("thead");
thead.innerHTML = `<tr>${buildHeader(people[0])}</tr>`;
table.appendChild(thead);
let tbody = document.createElement("tbody");
tbody.innerHTML = people.map(p => `<tr>${buildRow(p)}</tr>`).join('');
table.appendChild(tbody);
element.appendChild(table);
}
// Function to add the custom data first.
const customPeople = (data) => data.map((p,i) => {
return {
id: i, // Default the ID field to be index for now.
name: p.name,
sex: p.sex,
born: p.born,
died: p.died,
age: p.died - p.born, // Compute our age field
father: p.father,
mother: p.mother
};
});
// Note we call to transform our data before building table.
showPeople(customPeople(ANCESTRY_FILE));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="people"></div>
<script src="script.js"></script>
</body>
</html>
推荐阅读
- encryption - Gitlab 存储加密 gpg 文件的安全性如何?
- android - 当我在用户界面示例项目中运行通知应用程序时,是什么导致“java.lang.NullPointerException”错误?
- google-cloud-firestore - 如何在 Firestore 使用选项卡中设置时区?
- python - 如何从脚本中给出 python 解释器命令?
- python - Discord.py 链接周围有方括号
- javascript - 读取文件并动态修改变量
- javascript - 如何在模态对话框内将图像添加到画布绘制
- angular - 如何使用 rxjs 顺序加载数据?在每个序列中可能有几个调用
- javascript - 将 HTML 表单操作链接到节点 js 函数
- css - 如果画布没有显示在视口中,它消耗的资源是否与视口内的画布相同?