如何用JavaScript获取表格单元格锚点的href属性？循环失效求助

嘿，我来帮你解决这个困扰！从你给出的代码片段来看，核心问题应该是循环遍历单元格时的逻辑或者DOM选择器出了问题，下面我一步步给你拆解修复：

先说说循环失效的常见坑 #

你提到第二个循环（遍历单元格）不工作，大概率是这几个原因：

• 用了getElementsByTagName这类动态集合，遍历过程中DOM变化会导致集合长度异常
• 循环变量用了var，作用域泄露导致循环逻辑混乱
• 没排除表头行（比如<tr>里是<th>不是<td>），导致遍历到不符合预期的元素

修复后的完整代码示例 #

我基于你的代码结构，写了一个能稳定获取每行指定单元格内href的版本：

function asd() {
  this.container = document.querySelector(".cart-contents");
  if (!this.container) {
    return false;
  }
  this.itemsContainer = this.container.querySelector(".minicart-table");
  this.itemsTable = this.itemsContainer.querySelector(".views-table");
  this.cartDetails = [];

  // 获取表格所有数据行（如果表头是<th>，可以加tr:has(td)更精准过滤）
  const rows = this.itemsTable.querySelectorAll("tr");
  
  // 遍历每一行，用let避免var的作用域问题
  for (let i = 0; i < rows.length; i++) {
    const currentRow = rows[i];
    // 获取当前行的所有数据单元格
    const cells = currentRow.querySelectorAll("td");
    
    // 先确保当前行有足够的单元格，再处理第二个（索引1，从0开始计数）
    if (cells.length >= 2) {
      // 定位到第二个单元格里的<a>标签
      const linkElement = cells[1].querySelector("a");
      if (linkElement) {
        // 提取href属性，用getAttribute返回原始路径；用linkElement.href会返回绝对路径
        const itemHref = linkElement.getAttribute("href");
        // 把结果存入数组，还可以按需添加其他字段比如商品名称
        this.cartDetails.push({
          itemLink: itemHref,
          itemName: cells[1].textContent.trim()
        });
      }
    }
  }
  
  // 测试输出，方便你验证结果
  console.log("获取到的购物车链接：", this.cartDetails);
  return this.cartDetails;
}

关键修复点解释 #

• 替换getElementsByClassName为querySelector/querySelectorAll：前者返回静态集合，不会在遍历过程中因为DOM变化而自动更新，避免循环长度异常；后者是动态集合，很容易踩坑。
• 用let声明循环变量：避免var的变量提升导致的循环逻辑混乱，确保每次循环的i都是独立的。
• 增加单元格长度判断：防止某些行（比如空行、表头行）单元格数量不足导致的报错。
• 精准定位链接元素：直接用querySelector("a")找到单元格内的链接，按需选择获取href的方式（原始路径/绝对路径）。

调试小妙招 #

如果还是有问题，在循环里加几行日志排查：

for (let i = 0; i < rows.length; i++) {
  console.log(`第${i+1}行，单元格数量：${rows[i].querySelectorAll("td").length}`);
  console.log(`该行HTML结构：`, rows[i].innerHTML);
  // 其他代码...
}

这样能快速定位是哪一行出了问题，或者是不是没找到预期的单元格/链接。

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