Question

这些代码行从localstorage建立一个表，但是我很难弄清这两个.foreach方法的含义以及它们对表的含义。对桌子的理解是一些学校的功课。

//Function creates table for employeeList
function buildTable(data) {
    // creates variable "table"
    let table = document.createElement("table");

        // Create table head and body
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        let fields = Object.keys(data[0]);
        let headRow = document.createElement("tr");
        fields.forEach(function (field) {
            let headCell = document.createElement("th");
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.querySelector("thead").appendChild(headRow);
        data.forEach(function (object) {
            let row = document.createElement("tr");
            fields.forEach(function (field) {
                let cell = document.createElement("td");
                cell.textContent = object[field];
                if (typeof object[field] == "number") {
                    cell.style.textAlign = "left";
                }
                row.appendChild(cell);
            });
            table.querySelector("tbody").appendChild(row);
        });
        return table;

Answer 1

普通表的结构类似于：

<table>
    <th>
        <td>Heading cell</td>
    </th>
    <tr>
        <td>Normal cell</td>
    </tr>

</table>

th元素表示标题行，tr元素表示普通行。

2个foreach循环用于将数据添加到表中

first循环处理数据data[0]的第一行，该行进入标头，因为它包含标签。
第二个循环处理正常行中的其余数据。

table.querySelector("thead")和table.querySelector("tbody")检索在每个循环中生成的作为各自行的父级的DOM元素。

Answer 2

第一个foreach将基于data数组中第一个对象的键生成表头。

第二个foreach将为data数组中的每个对象呈现一个表行。

了解表功能

2 个答案: