使用JavaScript通过nth-child选中表格指定单元格后未生成input元素问题

代码错误点排查 #

• 选择器语法错误：原选择器table [data-cb-name='cbTable']中间有空格，会匹配table后代中带该属性的元素，若目标table本身携带data-cb-name="cbTable"属性，应去掉空格写成table[data-cb-name='cbTable']
• 条件判断逻辑错误：cellval是查询得到的DOM元素对象，直接和空字符串比对永远返回false，if分支不会触发。需要先判断元素是否存在，再判断单元格内容是否为空
• 变量声明和引用错误：let var x同时使用两个声明关键字属于语法错误；后续赋值用的变量名是input，但创建的元素变量名叫x，变量名不匹配无法正确赋值
• class属性赋值错误：class是JS保留关键字，不能直接用input.class赋值，需用className属性或者classList.add()方法设置类名
• 插入位置错误：你把生成的input插入到了body末尾，而非选中的目标单元格中，不符合你要在表格单元格插入元素的需求

修正后代码 #

// 确保DOM加载完成后再执行，若表格是异步加载的需要自行调整触发时机
document.addEventListener('DOMContentLoaded', function() {
  // 修正选择器
  const targetCell = document.querySelector("table[data-cb-name='cbTable'] tr:nth-child(1) > td:nth-child(2)");
  // 先判断单元格是否存在，再判断内容是否为空
  if (targetCell && targetCell.textContent.trim() === '') {
    const input = document.createElement('input');
    input.type = "submit";
    input.name = "Mod0InlineAdd";
    input.value = "Add";
    input.className = "cbResultSetAddButton";
    // 插入到目标单元格而非body
    targetCell.appendChild(input);
  }
})

补充说明 #

如果表格是第三方嵌入的动态渲染内容，DOMContentLoaded触发时表格还没加载完成，你可以改用定时器轮询检测目标单元格是否存在，或者监听嵌入内容的加载事件后再执行代码。

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