JS获取表格值时报Uncaught TypeError读取textContent错误如何解决

开发者阿泽

2026-9-26

问题根因

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')报错，核心原因是传入setCarrito函数的objeto对象不是表格行<tr>元素：

你在addCarrito中传入的是e.target.parentElement，如果你的.btn-success按钮是放在表格单元格<td>内部的，那么按钮的直接父元素是单个<td>，不是整行<tr>
在单个<td>下执行querySelectorAll('td')只能拿到空节点集合，访问索引[1]、[2]自然返回undefined，读取textContent就触发报错

修复方案

第一步：修正父元素获取逻辑

把addCarrito中传参逻辑换成用closest方法精准匹配表格行，不管按钮嵌套多少层都能找到对应的整行：

const addCarrito = e => {
  if (e.target.classList.contains('btn-success')) {
    console.log(e.target.dataset.id)
    // 替换原来的e.target.parentElement，找最近的<tr>元素
    setCarrito(e.target.closest('tr'))
  }
  e.stopPropagation()
}

第二步：增加空值校验避免报错

可以在setCarrito中增加前置校验，即使节点异常也不会抛出错误：

const setCarrito = objeto => {
  // 前置校验，节点不存在直接返回
  const tds = objeto?.querySelectorAll('td')
  const btn = objeto?.querySelector('.btn-success')
  if (!tds || tds.length < 3 || !btn) return

  const producto = {
    id: btn.dataset.id,
    nombre: tds[1].textContent,
    descripcion: tds[2].textContent,
    cantidad: 1
  }
  console.log(producto)
}