动态创建 table - 仅 Vanilla Javascript - 不在浏览器中显示

Question

我有一个功能可以遍历和排序项目及其数量，并应该在 table 中显示它们。

DOM 或浏览器中未显示任何内容。我是不是调用错了函数？

我有一个 index.html 文件使用脚本链接到我的 index.js 文件。

chrome 开发工具中没有显示任何错误。

说明

通过调用以下命令显示货架和物品配对

function displayShelfItemPair(shelfName, itemName);

function main() {

  let yesterdaysOrders = [

      {
        id: 1,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 02",
            quantity: 3
          },
          {
            itemName: "Item 03",
            quantity: 25
          },
          {
            itemName: "Item 04",
            quantity: 12
          },
        ],
      },
      {
        id: 2,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 08",
            quantity: 42
          },
          {
            itemName: "Item 09",
            quantity: 13
          },
          {
            itemName: "Item 12",
            quantity: 37
          },
        ],
      },
      {
        id: 3,
        orderLines: [{
          itemName: "Item 12",
          quantity: 16
        }, ],
      },
      {
        id: 4,
        orderLines: [{
            itemName: "Item 10",
            quantity: 11
          },
          {
            itemName: "Item 11",
            quantity: 10
          },
        ],
      },
      {
        id: 5,
        orderLines: [{
            itemName: "Item 06",
            quantity: 7
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
          {
            itemName: "Item 12",
            quantity: 14
          },
        ],
      },
      {
        id: 6,
        orderLines: [{
          itemName: "Item 05",
          quantity: 17
        }, ],
      },
      {
        id: 7,
        orderLines: [{
            itemName: "Item 03",
            quantity: 5
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
        ],
      },
      {
        id: 8,
        orderLines: [{
            itemName: "Item 02",
            quantity: 13
          },
          {
            itemName: "Item 07",
            quantity: 7
          },
          {
            itemName: "Item 09",
            quantity: 2
          },
        ],
      },
      {
        id: 9,
        orderLines: [{
            itemName: "Item 01",
            quantity: 4
          },
          {
            itemName: "Item 06",
            quantity: 17
          },
          {
            itemName: "Item 07",
            quantity: 3
          },
        ],
      },
      {
        id: 10,
        orderLines: [{
            itemName: "Item 11",
            quantity: 12
          },
          {
            itemName: "Item 12",
            quantity: 1
          },
        ],
      }
    ],
    result = Array.from(
      yesterdaysOrders.reduce((acc, {
        orderLines
      }) => {
        orderLines.forEach(({
          itemName,
          quantity
        }) => acc.set(itemName, (acc.get(itemName) || 0) + quantity));
        return acc;
      }, new Map), ([itemName, quantity]) => ({
        itemName,
        quantity
      }));



  result.sort((a, b) => {
    if (a.quantity > b.quantity) {
      return -1;
    } else if (a.quantity < b.quantity) {
      return 1;
    } else {
      return 0;
    }

  });

  function displayShelfItemPair(shelfName, itemName) {

    let table = document.createElement('table');

    document.body.appendChild(table); 

    for (let r in row) {

      let tr = document.createElement('tr'); 

      table.appendChild(tr); // Append to <table> node

      for (let c in cell) {

        let tdElement = document.createElement('td');

        tdElement.innerHTML = result[i][j];

        tr.appendChild(tdElement);

      }


    }

  console.log(displayShelfItemPair(shelfName, itemName));

  }
  
}

main();

期望输出

货架名称 |项目名称 (w/quantity) 1 项 12: 68<br> 2'' '' '' '' ''

Answer 1

编辑： 正如我现在发现的那样，无论您是在填充之前还是之后添加子项，输出都是相同的。

~~在您的函数 displayShelfItemPair 中，您在填充之前附加了新的 table 元素，这就是页面上不显示任何内容的原因。~~

用行等填充table元素，然后追加到文档中：

function displayShelfItemPair(shelfName, itemName) {

    let table = document.createElement('table');


    for (let i = 0; i < 3; i++) {
      let tr = document.createElement('tr'); 


      for (let j = 0; j < 3; j++) {
        let tdElement = document.createElement('td');
        tdElement.innerHTML = result[i][j];
        tr.appendChild(tdElement);

      }
      table.appendChild(tr); // Append to <table> node AFTER it is filled


    }
    document.body.appendChild(table); //append table to body AFTER it is filled
    console.log(displayShelfItemPair(shelfName, itemName));
}

Answer 2

您正在遍历不存在的对象。例如，for (let r in row)没有row。我重写了函数，希望能让你更接近。

function main() {

  let yesterdaysOrders = [

      {
        id: 1,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 02",
            quantity: 3
          },
          {
            itemName: "Item 03",
            quantity: 25
          },
          {
            itemName: "Item 04",
            quantity: 12
          },
        ],
      },
      {
        id: 2,
        orderLines: [{
            itemName: "Item 01",
            quantity: 1
          },
          {
            itemName: "Item 08",
            quantity: 42
          },
          {
            itemName: "Item 09",
            quantity: 13
          },
          {
            itemName: "Item 12",
            quantity: 37
          },
        ],
      },
      {
        id: 3,
        orderLines: [{
          itemName: "Item 12",
          quantity: 16
        }, ],
      },
      {
        id: 4,
        orderLines: [{
            itemName: "Item 10",
            quantity: 11
          },
          {
            itemName: "Item 11",
            quantity: 10
          },
        ],
      },
      {
        id: 5,
        orderLines: [{
            itemName: "Item 06",
            quantity: 7
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
          {
            itemName: "Item 12",
            quantity: 14
          },
        ],
      },
      {
        id: 6,
        orderLines: [{
          itemName: "Item 05",
          quantity: 17
        }, ],
      },
      {
        id: 7,
        orderLines: [{
            itemName: "Item 03",
            quantity: 5
          },
          {
            itemName: "Item 07",
            quantity: 2
          },
        ],
      },
      {
        id: 8,
        orderLines: [{
            itemName: "Item 02",
            quantity: 13
          },
          {
            itemName: "Item 07",
            quantity: 7
          },
          {
            itemName: "Item 09",
            quantity: 2
          },
        ],
      },
      {
        id: 9,
        orderLines: [{
            itemName: "Item 01",
            quantity: 4
          },
          {
            itemName: "Item 06",
            quantity: 17
          },
          {
            itemName: "Item 07",
            quantity: 3
          },
        ],
      },
      {
        id: 10,
        orderLines: [{
            itemName: "Item 11",
            quantity: 12
          },
          {
            itemName: "Item 12",
            quantity: 1
          },
        ],
      }
    ],
    result = Array.from(
      yesterdaysOrders.reduce((acc, {
        orderLines
      }) => {
        orderLines.forEach(({
          itemName,
          quantity
        }) => acc.set(itemName, (acc.get(itemName) || 0) + quantity));
        return acc;
      }, new Map), ([itemName, quantity]) => ({
        itemName,
        quantity
      }));



  result.sort((a, b) => {
    if (a.quantity > b.quantity) {
      return -1;
    } else if (a.quantity < b.quantity) {
      return 1;
    } else {
      return 0;
    }

  });

  function displayShelfItemPairs() {

    let table = document.createElement('table');

    document.body.appendChild(table); 
    table.innerHTML = "<tr><th>ShelfName</th><th>itemName (w/quantity)</th></tr>"

    let shelf = 1;
    for (let r of result) {

      let tr = document.createElement('tr'); 
      table.appendChild(tr); // Append to <table> node
      tr.innerHTML = "<td>" + shelf + "</td><td>" + r.itemName + ": " + r.quantity + "</td>";
      shelf++

    }
  }
  displayShelfItemPairs()
  
}

main();

动态创建 table - 仅 Vanilla Javascript - 不在浏览器中显示

Dynamically created table - Vanilla Javascript only - not displaying in browser

javascript

html

dom-manipulation