在 html/javascript 中从 Object 创建 table

Question

我已经在 html 中硬编码了 table，现在我想在 object 的帮助下以类似的结构动态生成 table。在我看过的大多数文章中，它显示以稍微不同的格式动态创建 table，将 object 键作为 header，但我想创建一个 table每个 object 值。例如 result[0] 应该是一个 table，result[1] 是另一个 table 和任何一个 key-value 例如。选项卡 A 为 header。我该怎么做？

我只想显示ID等于23的table

result = [{
  "Plan ID": 0,
  "ID": 24,
  "[Plan name]": "Tab A",
  "Emp Only": 133.90,
  "Emp + Spouse/Partner": 161.30,
  "Emp + Child(ren)": 53.30,
  "Emp + Family": 186.20,
  " max contrib. / Emp only": 3000,
  " max contrib. / Emp + dependents": 6000,
  "Emp ded. / Emp only": 6650,
  "Emp ded. / Emp + dependents": 13300
}, {
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab B",
  "Emp Only": 33.90,
  "Emp + Spouse/Partner": 161.1,
  "Emp + Child(ren)": 55.30,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": 3000,
  " max contrib. / Emp + dependents": 6000,
  "Emp ded. / Emp only": 660,
  "Emp ded. / Emp + dependents": 5500

}]

<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2" onchange="myFunction(event)"></th>
    </tr>
    <tr>
      <td>.90</td>
    </tr>
    <tr>
      <td>1.1</td>
    </tr>
    <tr>
      <td>.30</td>
    </tr>
    <tr>
      <td>0.8</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>0</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
  </table>
</div>

Answer 1

看看这个

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

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

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

result = [{ "Plan ID": 0, "ID": 23, "[Plan name]": "Tab A", "Emp Only": 133.90, "Emp + Spouse/Partner": 161.30, "Emp + Child(ren)": 53.30, "Emp + Family": 186.20, " max contrib. / Emp only": 3000, " max contrib. / Emp + dependents": 6000, "Emp ded. / Emp only": 6650, "Emp ded. / Emp + dependents": 13300 }, { "Plan ID": 0, "ID": 23, "[Plan name]": "Tab B", "Emp Only": 33.90, "Emp + Spouse/Partner": 161.1, "Emp + Child(ren)": 55.30, "Emp + Family": 180.8, " max contrib. / Emp only": 3000, " max contrib. / Emp + dependents": 6000, "Emp ded. / Emp only": 660, "Emp ded. / Emp + dependents": 5500 }];

const main = document.getElementById('main');
main.innerHTML = result.map((res,i) => {
  const header = res["[Plan name]"]; // get the plan from the entry
  const idx = i+1;
  return `<div class="table_container">
  <table id="table${idx}" class="checkboxdiv">
    <tr>
      <th>${header}<input type="checkbox" id="${idx}" name="table${idx}" value="table${idx}"> </th>
    </tr>
    ${Object.entries(res)  
      .filter(([key,val]) => key.includes('Emp')) // filter the Emp
      .map(([key,val]) => `<tr><td class="amt">$${val.toFixed(2)}</td></tr>`).join('')} 
  </table></div>`}).join('');
  
// replaces your inline event handler using delegation 
main.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type==="checkbox") console.log(tgt.id)
})

.amt {text-align:right; }

<div id="main">
   
</div>

这里也许更有用 - 显示密钥

result = [{ "Plan ID": 0, "ID": 23, "[Plan name]": "Tab A", "Emp Only": 133.90, "Emp + Spouse/Partner": 161.30, "Emp + Child(ren)": 53.30, "Emp + Family": 186.20, " max contrib. / Emp only": 3000, " max contrib. / Emp + dependents": 6000, "Emp ded. / Emp only": 6650, "Emp ded. / Emp + dependents": 13300 }, { "Plan ID": 0, "ID": 23, "[Plan name]": "Tab B", "Emp Only": 33.90, "Emp + Spouse/Partner": 161.1, "Emp + Child(ren)": 55.30, "Emp + Family": 180.8, " max contrib. / Emp only": 3000, " max contrib. / Emp + dependents": 6000, "Emp ded. / Emp only": 660, "Emp ded. / Emp + dependents": 5500 }];

const main = document.getElementById('main');
main.innerHTML = result.map((res,i) => {
  const header = res["[Plan name]"]; // get the plan from the entry
  const idx = i+1;
  return `<div class="table_container">
  <table id="table${idx}" class="checkboxdiv">
    <tr>
      <th>${header}<input type="checkbox" id="${idx}" name="table${idx}" value="table${idx}"> </th>
    </tr>
    ${Object.entries(res)  
      .filter(([key,val]) => key.includes('Emp')) // filter the Emp
      .map(([key,val]) => `<tr><td>${key}</td><td class="amt">$${val.toFixed(2)}</td></tr>`).join('')} 
  </table></div>`}).join('');
  
main.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type==="checkbox") console.log(tgt.id)
})

.amt { text-align:right; }

<div id="main">
   
</div>

Answer 2

您可以使用模板文字构建 table 并将每个键值对映射到一行。

只需传递记录（数据）、table名称的键和原始数组中出现的索引。

将数字格式化为货币 ($)，只要它们验证为数字 (!isNaN)。

您可以通过在父级 (body) 上调用 insertAdjacentHTML 并传入 beforeend.

来将 HTML 文本附加为节点

编辑： 我为每个 table 添加了一个标记 (INCLUDE_KEYS) 到 show/hide 键列。它是可选的，目前设置为 false.

const INCLUDE_KEYS = false; // Set to true to reveal keys

const createTableHTML = (data, key, index, includeKeys) => `
  <div class="table-wrapper">
    <table class="vertical-table">
      <thead>
        <tr>
          <th ${includeKeys ? 'colspan="2"' : ''}>
            ${data[key]}
            <input type="checkbox"
                   onchange="myfunction(this)"
                   value="table${index + 1}" /></th>
        </tr>
      </thead>
      <tbody>
        ${Object.keys(data).filter(k => k !== key).map(key => `<tr>
          ${includeKeys ? `<th>${key}</th>` : ''}
          <td>${!isNaN(data[key]) ? `$${data[key].toFixed(2)}` : data[key]}</td>
        </tr>`).join('')}
      </tbody>
    </table>
  </div>
`;

const result = [{
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab A",
  "Emp Only": 30.5,
  "Emp + Spouse/Partner": 154.1,
  "Emp + Child(ren)": 48.8,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": "None",
  " max contrib. / Emp + dependents": "None",
  "Emp ded. / Emp only": 2750,
  "Emp ded. / Emp + dependents": 5500,
  "Emp OOP max / per person": 6850,
  "Emp OOP max / entire famliy": 13700
}, {
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab B",
  "Emp Only": 30.5,
  "Emp + Spouse/Partner": 154.1,
  "Emp + Child(ren)": 48.8,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": "None",
  " max contrib. / Emp + dependents": "None",
  "Emp ded. / Emp only": 2750,
  "Emp ded. / Emp + dependents": 5500,
  "Emp OOP max / per person": 6850,
  "Emp OOP max / entire famliy": 1555
}];

result.forEach((obj, index) =>
  document.body.insertAdjacentHTML('beforeend',
    createTableHTML(obj, '[Plan name]', index, INCLUDE_KEYS)));
  
function myfunction(checkbox) {
  console.log(checkbox.value);
}

.table-wrapper table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

.table-wrapper table,
.table-wrapper table th,
.table-wrapper table td {
  border: thin solid grey;
}

.table-wrapper table thead {
  border-bottom: thick double grey;
}

.table-wrapper table th,
.table-wrapper table td {
  padding: 0.25em;
}

.table-wrapper tbody td {
  text-align: right;
}

Answer 3

考虑以下因素。

$(function() {
  function myFunction(event) {
    // Do the needful
  }

  var result = [{
    "Plan ID": 0,
    "ID": 23,
    "[Plan name]": "Tab A",
    "Emp Only": 30.5,
    "Emp + Spouse/Partner": 154.1,
    "Emp + Child(ren)": 48.8,
    "Emp + Family": 180.8,
    " max contrib. / Emp only": "None",
    " max contrib. / Emp + dependents": "None",
    "Emp ded. / Emp only": 2750,
    "Emp ded. / Emp + dependents": 5500,
    "Emp OOP max / per person": 6850,
    "Emp OOP max / entire famliy": 13700
  }, {
    "Plan ID": 0,
    "ID": 23,
    "[Plan name]": "Tab B",
    "Emp Only": 30.5,
    "Emp + Spouse/Partner": 154.1,
    "Emp + Child(ren)": 48.8,
    "Emp + Family": 180.8,
    " max contrib. / Emp only": "None",
    " max contrib. / Emp + dependents": "None",
    "Emp ded. / Emp only": 2750,
    "Emp ded. / Emp + dependents": 5500,
    "Emp OOP max / per person": 6850,
    "Emp OOP max / entire famliy": 1555
  }];

  function makeTable(dataObj, target) {
    target = (target != undefined ? $(target) : $(".table_container"));
    var newTable = $("<table>", {
      id: "table-" + dataObj.ID,
      class: "checkboxdiv"
    }).appendTo(target);
    $("<tr>").appendTo(newTable);
    $("<th>").appendTo($("tr", newTable));
    $("tr > th", newTable).html(dataObj['[Plan name]']);
    $("<input>", {
      type: "checkbox",
      id: dataObj.ID,
      name: "table" + dataObj.ID,
      value: "table" + dataObj.ID
    }).click(function(event) {
      myFunction(event);
    }).appendTo($("tr > th", newTable));
    var exclude = ["Plan ID", "ID", "[Plan name]"];
    $.each(dataObj, function(key, val) {
      if (exclude.indexOf(key) < 0) {
        if (parseInt(val)) {
          newTable.append("<tr><td>$" + parseFloat(val).toFixed(2) + "</td></tr>");
        } else {
          newTable.append("<tr><td>" + val + "</td></tr>");
        }
      }
    });
  }

  $.each(result, function(i, items) {
    makeTable(items);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_container">
  <!-- Example Output
  <table id="table1" class="checkboxdiv">
    <tr>
      <th>Tab A<input type="checkbox" id="1" name="table1" value="table1" onchange="myFunction(event)"> </th>
    </tr>
    <tr>
      <td>3.90</td>
    </tr>
    <tr>
      <td>1.30</td>
    </tr>
    <tr>
      <td>.30</td>
    </tr>
    <tr>
      <td>6.20</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>50</td>
    </tr>
    <tr>
      <td>300</td>
    </tr>
  </table>
</div>

<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2" onchange="myFunction(event)"></th>
    </tr>
    <tr>
      <td>.90</td>
    </tr>
    <tr>
      <td>1.30</td>
    </tr>
    <tr>
      <td>.30</td>
    </tr>
    <tr>
      <td>6.20</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>00</td>
    </tr>
    <tr>
      <td>0</td>
    </tr>
    <tr>
      <td>300</td>
    </tr>
  </table>
  -->
</div>

Answer 4

现已测试，这可能是您要找的吗？

const result = [{
    "Plan ID": 0,
    "ID": 23,
    "[Plan name]": "Tab A",
    "Emp Only": 133.90,
    "Emp + Spouse/Partner": 161.30,
    "Emp + Child(ren)": 53.30,
    "Emp + Family": 186.20,
    " max contrib. / Emp only": 3000,
    " max contrib. / Emp + dependents": 6000,
    "Emp ded. / Emp only": 6650,
    "Emp ded. / Emp + dependents": 13300
  },
  {
    "Plan ID": 0,
    "ID": 23,
    "[Plan name]": "Tab B",
    "Emp Only": 33.90,
    "Emp + Spouse/Partner": 161.1,
    "Emp + Child(ren)": 55.30,
    "Emp + Family": 180.8,
    " max contrib. / Emp only": 3000,
    " max contrib. / Emp + dependents": 6000,
    "Emp ded. / Emp only": 660,
    "Emp ded. / Emp + dependents": 5500
  }
];

const el = document.getElementById("table_container");
let tables = "";
result.forEach(r => {
  tables += `
    <table class="checkboxdiv">
    <theader>
    <th>Key</th>
    <th>Value</th>
    </theader>
  `;
  for (let key in r) {
    tables += `
      <tr>
      <td>${key}</td>
      <td>${r[key]}</td>
      </tr>
    `;
  }
  tables += `</table>`;
});
el.innerHTML = tables;

<div id="table_container"></div>

在 html/javascript 中从 Object 创建 table

Creating table from Object in html/javascript

html

javascript

jquery

html-table