在html/javascript中从对象创建表

我已经用html硬编码了这个表，现在我想在对象的帮助下以类似的结构动态生成这个表。在我看过的大多数文章中，它显示了以稍微不同的格式以对象键作为标题动态创建表，但我想从每个对象值创建一个表。例如，结果[0]应该是一个表，结果[1]应该是另一个带有任意一个键值的表，例如Tab A作为标题。我该怎么做

我只想显示ID等于23的表

结果=[{
“计划ID”：0，
“ID”：24，
“[计划名称]：”选项卡A“，
“仅限Emp”：133.90，
“Emp+配偶/伴侣”：161.30，
“Emp+儿童（ren）”：53.30，
“Emp+系列”：186.20，
“仅限最大贡献/Emp”：3000，
“最大供款/Emp+受抚养人”：6000，
“Emp ded./Emp only”：6650，
“Emp ded./Emp+家属”：13300
}, {
“计划ID”：0，
“ID”：23，
“[计划名称]：”选项卡B“，
“仅限Emp”：33.90，
“Emp+配偶/合伙人”：161.1，
“Emp+儿童（ren）”：55.30，
“Emp+系列”：180.8，
“仅限最大贡献/Emp”：3000，
“最大供款/Emp+受抚养人”：6000，
“Emp ded./Emp only”：660，
“Emp ded./Emp+家属”：5500
}]

表B
$33.90
$161.1
$53.30
$180.8
$3000
$6000
$660
$5500

看看这个

使用一个过滤器和一些映射，我们可以一次性创建完整的HTML

我还删除了内联事件处理程序并将其委托给主容器

此外，我添加了货币，并将单元格与数字对齐

result=[{“计划ID”：0，“ID”：23，“[计划名称]”：“表A”，“仅限Emp”：133.90，“Emp+配偶/伴侣”：161.30，“Emp+子女（ren）”：53.30，“Emp+家庭”：186.20，“仅限最大参保人/受抚养人”：3000，“最多参保人/受抚养人”：6000，“仅限Emp”：6650，“受抚养人/受抚养人”：13300}，{“计划ID”：0，“ID”：23，“[计划名称]：“表B”，“仅限Emp”：33.90，“Emp+配偶/伴侣”：161.1，“Emp+子女（ren）”：55.30，“Emp+家庭”：180.8，“仅限最大供款/受抚养人”：3000，“仅限最大供款/受抚养人”：6000，“仅限Emp/受抚养人”：660，“受抚养/受抚养人”：5500}；
const main=document.getElementById（'main'）；
main.innerHTML=result.map（（res，i）=>{
const header=res[“[计划名称]”]；//从条目中获取计划
常数idx=i+1；
返回`
${header}
${Object.entries（res）
.filter（（[key，val]）=>key.includes（'Emp'）//过滤Emp
.map（（[key，val]）=>“$${val.toFixed（2）}”）.join（“”）}
`}).加入（“”）；
//使用委派替换内联事件处理程序
main.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
if（tgt.type==“checkbox”）console.log（tgt.id）
})

.amt{text align:right；}

---

您可以使用模板文本构造表，并将每个键值对映射到一行

只需传递记录（数据）、表名的键以及原始数组中的外观索引

将数字格式化为货币（

$

），只要它们验证为数字（

！isNaN

）

您可以通过在父级（

body

）上调用

insertAdjacentHTML

，并在结束之前传入

，将HTML文本附加为节点

编辑：我添加了一个标志（
包含关键字
）来显示/隐藏每个表的关键字列。它是可选的，当前设置为
false


const INCLUDE_KEYS=false；//设置为true以显示键
const createTableHTML=（数据、键、索引、includeKeys）=>`
${data[key]}
${Object.keys（data）.filter（k=>k！==key）.map（key=>`
${includeKeys？`${key}`:''}
${！isNaN（数据[key]）？`$${data[key].toFixed（2）}`:data[key]}
`).join（“”）}
`;
常数结果=[{
“计划ID”：0，
“ID”：23，
“[计划名称]：”选项卡A“，
“仅限Emp”：30.5，
“Emp+配偶/伴侣”：154.1，
“Emp+儿童（ren）”：48.8，
“Emp+系列”：180.8，
“仅限最大contrib./Emp”：“无”，
“最大参保人/Emp+家属”：“无”，
“Emp ded./Emp only”：2750，
“Emp ded./Emp+家属”：5500，
“Emp OOP最大值/人均”：6850，
“Emp OOP最大值/整个家庭”：13700
}, {
“计划ID”：0，
“ID”：23，
“[计划名称]：”选项卡B“，
“仅限Emp”：30.5，
“Emp+配偶/伴侣”：154.1，
“Emp+儿童（ren）”：48.8，
“Emp+系列”：180.8，
“仅限最大contrib./Emp”：“无”，
“最大参保人/Emp+家属”：“无”，
“Emp ded./Emp only”：2750，
“Emp ded./Emp+家属”：5500，
“Emp OOP最大值/人均”：6850，
“Emp OOP最大值/整个家庭”：1555
}];
结果.forEach（（对象，索引）=>
document.body.insertAdjacentHTML（'beforeed'，
createTableHTML（对象，“[Plan name]”，索引，包含_键）；
函数myfunction（复选框）{
console.log（checkbox.value）；
}
.table包装表{
边界塌陷：塌陷；
边缘底部：1米；
}
.表包装器表，
.表包装器表th，
.表包装器表td{
边框：薄实灰色；
}
.table包装器table thead{
底边：厚重瓣灰色；
}
.表包装器表th，
.表包装器表td{
填充：0.25em；
}
.T.表格包装器tbody td{
文本对齐：右对齐；
}
考虑以下几点


$（函数（）{
函数myFunction（事件）{
//做需要的事
}
var结果=[{
“计划ID”：0，
“ID”：23，
“[计划名称]：”选项卡A“，
“仅限Emp”：30.5，
“Emp+配偶/伴侣”：154.1，
“Emp+儿童（ren）”：48.8，
“Emp+系列”：180.8，
“仅限最大contrib./Emp”：“无”，
“最大参保人/Emp+家属”：“无”，
“Emp ded./Emp only”：2750，
“Emp ded./Emp+家属”：5500，
“Emp OOP最大值/人均”：6850，
“Emp OOP最大值/整个fam