时间戳

首页 > 解决方案 > 用数组生成表

javascript - 用数组生成表

问题描述

我正在创建一个网站，该网站在从数组加载时生成动态表。数组是

let products = 
[
   ["product1", "Small Widget", "159753", 33, 22],
   ["product2", "Medium Widget", "258456", 55, 44],
   ["product3", "Large Widget", "753951", 77, 88],
   ["product4", "Not a Widget", "852654", 11, 2],
   ["product5", "Could be a Widget", "654456", 99, 6],
   ["product6", "Ultimate Widget", "321456", 111, 66],
   ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
   
]

该数组包括：产品名称、产品描述、产品 ID、价格和库存数量。我需要让表格将这些字段按名称、ID、描述、价格和库存数量的顺序输出，然后我需要让价格字段在价格前面有一个$，如果小于则检查库存数量20. 如果库存小于 20 我需要更改单元格的背景颜色。有人可以帮我弄清楚我到底需要怎么做吗？这是我目前的 js 文件，它只生成表格，但没有我需要的格式。

let products = 
[
   ["product1", "Small Widget", "159753", 33, 22],
   ["product2", "Medium Widget", "258456", 55, 44],
   ["product3", "Large Widget", "753951", 77, 88],
   ["product4", "Not a Widget", "852654", 11, 2],
   ["product5", "Could be a Widget", "654456", 99, 6],
   ["product6", "Ultimate Widget", "321456", 111, 66],
   ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
   
]

//first create the table
function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
        let th = document.createElement("th");
        let text = document.createTextNode();
        th.appendChild(text);
        row.appendChild(th);
    }
}

function generateTable(table, data) {
    for (let element of data) {
        let row = table.insertRow();
        for (key in element) {
            let cell = row.insertCell();
            let text = document.createTextNode(element[key]);
            cell.appendChild(text);
        }
    }
}
let table = document.querySelector("table");
let data = Object.keys(products[0]);
generateTable(table, products);
generateTableHead(table, data);

<!DOCTYPE html>
<html lang="en">
<head>
<title>The Sunglass Emporium </title>
   <meta charset="utf-8" />

    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles/reset.css" rel="stylesheet" type="text/css" />
    
    <link rel="icon" href="images/iconPic.png">
    
</head>

    <header>
    <a href="index.html"><img class="topImg" src="images/headerPic.png" alt="MUSC"/></a>
    <a href="index.html"><img class="topImg2" src="images/headerPic2.png" alt="MUSC"/></a>
    </header>
    <h1 class="titleH1"> The Sunglass Emporium </h1>
    <nav>
        <ul class="topnav1">
        <li><a class="topnav2" href="productList.html" >Product List</a></li>
        <li><a class="topnav2" href="productInfo.html" >Product Info</a></li>
        <li><a class="topnav2" href="productOrder.html" >Product Order</a></li>
        </ul>
    </nav>



<body>
    <table id="test">
    </table>
</body>



<footer>

</footer>

</html>

有人可以帮我指出正确的方向吗？我不知道要改变什么才能使表格正常工作。我想严格使用常规 javascript。

标签： javascripthtmlarraysdom

解决方案

请找到我添加的更正

  • 您的表头没有正确界定。我用您所需的标题标签创建了一个虚拟数组并传递给您的generateTableHead函数
  • 在您的generateTable函数内部，应该有一些逻辑来区分“价格”和“库存数量”数据。我使用数组的索引来做到这一点。索引 3 属于Price4 属于Inventory Amount。
  • 因此，如果索引为 3，则附加$符号，如果索引为，则4根据该值向单元格添加背景颜色。

编辑：如果您想要不同的订单，您可以将订单本身保存在一个单独的数组中，并使用该数组进行处理，就像在这个小提琴中一样。为了得到总和，使用我使用的一些逻辑Inventory Amount从单个数组中选择所有字段并填充总和。Array.mapArray.reuce

工作小提琴

// Array to keep the order of itration
const order = [0, 2, 1, 3, 4];

let products = [
  ["product1", "Small Widget", "159753", 33, 22],
  ["product2", "Medium Widget", "258456", 55, 44],
  ["product3", "Large Widget", "753951", 77, 88],
  ["product4", "Not a Widget", "852654", 11, 2],
  ["product5", "Could be a Widget", "654456", 99, 6],
  ["product6", "Ultimate Widget", "321456", 111, 66],
  ["product7", "Jumbo Small Medium Widget", "987456", 88, 11]
];

//first create the table
function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of order) {
    let th = document.createElement("th");
    let text = document.createTextNode(data[key]);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      const textContent = order[key] === 3 ? '$' + element[order[key]] : element[order[key]];
      let text = document.createTextNode(textContent);
      cell.appendChild(text);
      if (order[key] === 4 && element[order[key]] < 20) {
        cell.style.background = "grey";
      }
    }
  }
}

function generateTableFooter(table) {
  let row = table.insertRow();
  // My summation logic
  // Select the Inventory Amount from each array in products, which is the 5th element of array
  // `map` will generate an array with all Inventory Amount [22, 44, 88, 2, 6, 66, 11]
  // `reduce` will loop through this array and will find the sum
  const total = products.map((product) => product[4]).reduce((sum, curr) => {
    sum += curr;
    return sum;
  }, 0);
  for (let key of order) {
    let cell = row.insertCell();
    const textContent = order[key] === 4 ? total : '';
    let text = document.createTextNode(textContent);
    cell.appendChild(text);
  }
}

let table = document.querySelector("table");
const header = ["Product Name", "Product Description", "Product ID", "Price", "Inventory Amount"];
generateTable(table, products);
generateTableHead(table, header);
generateTableFooter(table);
<table id="test"></table>

推荐阅读