编程入门求助：如何用JS for循环设置HTML图片并填充地毯店网站表格？

嘿，作为刚学两周JavaScript的入门者，能推进到这个项目已经很棒了！咱们一步步来解决你的作业要求：

一、独立JS文件存储地毯数据数组 #

首先创建一个独立的JS文件（比如命名为rugData.js），把你的地毯库存数据以数组形式存放，示例如下：

// rugData.js
const rugInventory = [
  { id: 1, name: "波斯手工地毯", price: 1299, image: "rug-1.jpg" },
  { id: 2, name: "北欧简约地毯", price: 599, image: "rug-2.jpg" },
  { id: 3, name: "复古几何地毯", price: 899, image: "rug-3.jpg" }
];

之后在你的HTML文件里，通过<script src="rugData.js"></script>引入这个文件，就能全局访问rugInventory数组了。

二、HTML页面内编写函数，用for循环填充表格 #

先在HTML里搭好表格的基础结构，再写JS函数用for循环遍历数组填充内容：

<!-- HTML表格结构 -->
<table id="rugTable" border="1">
  <thead>
    <tr>
      <th>商品ID</th>
      <th>地毯名称</th>
      <th>价格</th>
      <th>预览图</th>
    </tr>
  </thead>
  <tbody id="tableContent">
    <!-- JS将在这里填充内容 -->
  </tbody>
</table>

<script>
// HTML内的表格填充函数
function fillRugTable() {
  const tableBody = document.getElementById('tableContent');
  // 用for循环遍历独立JS文件里的数组
  for (let i = 0; i < rugInventory.length; i++) {
    const currentRug = rugInventory[i];
    // 创建表格行
    const row = document.createElement('tr');
    // 填充每一行的内容，同时插入图片
    row.innerHTML = `
      <td>${currentRug.id}</td>
      <td>${currentRug.name}</td>
      <td>$${currentRug.price}</td>
      <td><img src="${currentRug.image}" alt="${currentRug.name}" width="80"></td>
    `;
    tableBody.appendChild(row);
  }
}

// 页面加载完成后自动执行填充函数
window.addEventListener('load', fillRugTable);
</script>

这段代码里的for循环会逐个取出数组里的地毯数据，生成表格行并插入页面，同时也完成了用for循环设置.jpg图片的要求。

三、补全你的getID函数 #

你提供的getID函数是用来提取URL中的商品id参数的，咱们把它补全完善：

// rugData.js里的getID函数
function getID() {
  var url = window.location.toString();
  const idParamIndex = url.indexOf("?id=");
  if (idParamIndex > -1) {
    // 截取?id=之后的内容
    var start = idParamIndex + 4;
    // 检查是否有其他参数（比如&），如果有就截止到该位置
    var end = url.indexOf("&", start);
    if (end === -1) end = url.length;
    return url.substring(start, end);
  }
  // 没有id参数时返回null
  return null;
}

这个函数可以帮你获取类似your-page.html?id=2这样URL里的2，之后你可以用这个id在数组里匹配对应的地毯数据。

小提示 #

• 记得把JS文件的引入放在HTML的<body>标签末尾，或者给<script>标签加上defer属性，确保DOM加载完成后再执行JS代码。
• 测试图片时，要确认rug-1.jpg这类图片文件和HTML文件在同一目录，或者使用正确的相对路径。

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