繪制具有動態列/行的 HTML 表

Question

我有一個這樣的對象數組：

const reports = [
      {
        user: "John",
        document: [
          {            
            document_name: "word",
            document_type: 1,
            cid: 2,
          },
          {           
            document_name: "excel",
            document_type: 1,
            cid: 2,
          },
        ],
      },
      {
        user: "Matt",
        document: [
          {            
            document_name: "access",
            document_type: 1,
            cid: 1,
          },
          {            
            document_name: "word",
            document_type: 1,
            cid: 3,
          },
        ],
      },
    ];

有沒有辦法繪制一個 HTML 表，其中列是用戶，行是文檔名稱（在這兩種情況下都沒有重復）。 所以，有點像這樣。

	約翰	馬特
單詞	2	1
excel	2
使用權		1

具有數值的單元格填充有相應的cid值。

任何幫助，即使是關於const reports重構，都值得贊賞。

Answer 1

表格是按行而不是按列創建的。 也就是說，在 HTML 中，行tr是幾列的包裝器。 這對您的問題很重要，因為您的結構是按列組織的（用戶優先，而不是文檔優先）。

同時，列數是動態的（由您的數據確定），並且需要在所有行中都相同，即使缺少用戶也是如此。 行的計數相同。 雖然數據可能有差距，但表格不能。

因此，通過首先創建單獨的列表，您可以更輕松地在兩個維度上進行迭代。 在數據庫理論中，這稱為規范化。

規范化的一部分是僅存儲唯一項目，因此您可以使用JavaScript Sets 。 當您add()一個項目時，它只添加一次，避免重復。

// this is pseudo-code to demonstrate the target structures
const users = Set(2) [ "John", "Matt" ];
const docs = Set(3) [ "word", "excel", … ]
const usages = [{user: "John", doc: "word", cid: 2}, …]

然后你可以使用for … in來迭代你的集合並創建列和行。

為方便起見，您可以准備表格的 static 結構，然后使用document.createElement()和.appendChild()將動態元素添加到表格中。

您應該使用<thead>和<th>元素創建一個表以在語義上關聯數據。 這不僅可以幫助殘障用戶通過輔助技術導航表格，還可以在打印輸出中重復表格標題。

 const reports = [{ user: "John", document: [{ document_name: "word", document_type: 1, cid: 2, }, { document_name: "excel", document_type: 1, cid: 2, }, ], }, { user: "Matt", document: [{ document_name: "access", document_type: 1, cid: 1, }, { document_name: "word", document_type: 1, cid: 3, }, ], }, ]; // Normalise data const users = new Set(reports.map(r => r.user)); const docs = new Set(); const usages = []; reports.forEach(r => r.document.forEach(d => { docs.add(d.document_name); usages.push({ user: r.user, doc: d.document_name, cid: d.cid }); })); // Add to the table // Create headers const theadTr = document.querySelector('thead tr'); for (const u of users) { const th = document.createElement('th'); th.innerHTML = u; theadTr.appendChild(th); } // Create data rows const tbody = document.querySelector('tbody'); for (const d of docs) { const tr = document.createElement('tr'); const th = document.createElement('th'); th.innerHTML = d; tr.appendChild(th); for (const u of users) { const td = document.createElement('td'); const ud = usages.find(ud => ud.user === u && ud.doc === d); if (ud) td.innerHTML = ud.cid; tr.appendChild(td); } tbody.appendChild(tr); }

 th, td { padding: .2em.5em; border: 1px solid gray; } thead tr { background-color: lightgray; color: black; } table { border-collapse: collapse; }

 <table> <caption>Document usage per user and document type</caption> <thead> <tr> <th></th> </tr> </thead> <tbody> </tbody> </table>