原生JS基于二维数组生成带自定义格式的动态表格如何实现？

完整修改后的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]
]

// 定义表头和对应原数组的索引顺序：[名称索引, ID索引, 描述索引, 价格索引, 库存索引]
const tableConfig = {
  headers: ["产品名称", "产品ID", "产品描述", "价格", "库存数量"],
  indexMap: [0, 2, 1, 3, 4]
}

function generateTableHead(table, headers) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let headerText of headers) {
        let th = document.createElement("th");
        let text = document.createTextNode(headerText);
        th.appendChild(text);
        row.appendChild(th);
    }
}

function generateTable(table, data, config) {
    const { indexMap } = config;
    for (let element of data) {
        let row = table.insertRow();
        // 按照配置的索引顺序生成单元格
        for (let i = 0; i < indexMap.length; i++) {
            const originIndex = indexMap[i];
            let cell = row.insertCell();
            let cellValue = element[originIndex];
            // 价格字段加$符号
            if (originIndex === 3) {
                cellValue = `$${cellValue}`;
            }
            // 库存小于20修改背景色
            if (originIndex === 4 && cellValue < 20) {
                cell.style.backgroundColor = "#ffcccc";
            }
            let text = document.createTextNode(cellValue);
            cell.appendChild(text);
        }
    }
}

// 页面加载完成后执行，避免获取不到DOM节点
window.onload = function() {
  let table = document.querySelector("#test");
  generateTableHead(table, tableConfig.headers);
  generateTable(table, products, tableConfig);
}

HTML修正建议 #

你现有HTML中header、h1、nav元素都放在了<body>标签外，不符合HTML规范，建议调整为以下结构：

<!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>
<body>
    <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>

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

    <script>
        // 把上述JS代码放在此处，或者单独引入JS文件
    </script>
</body>

<footer>

</footer>

</html>

核心修改说明 #

• 调整字段顺序：通过indexMap配置映射原数组的索引，按照要求的顺序读取数组元素，不再遍历原数组的所有索引
• 价格加$符号：判断当前处理的字段是原数组索引3（价格字段）时，给值拼接前缀$
• 库存高亮：判断当前处理的是库存字段且值小于20时，直接给单元格设置浅红色背景
• 修复原代码表头生成错误：原来用Object.keys(products[0])拿到的是数组的索引值（0、1、2、3、4），无法生成正确的表头文字，现在直接定义表头文字数组
• 增加页面加载监听：确保DOM加载完成后再操作表格元素，避免获取不到table节点的问题

内容的提问来源于stack exchange，提问作者Avmeade