使用textContent给表格td赋值后，内部input样式与可编辑性失效

你操作textContent的逻辑存在DOM层级的偏差，并不是textContentAPI本身的用法错误。
你写的批量填充代码是直接选中所有外层td单元格，给单元格本身的textContent赋值"1"。这个操作的实际效果是完全清除td内部的所有原有子节点（也就是你预先放好的<input>可编辑输入框），替换成一段没有任何结构的纯文本，直接触发所有你观察到的异常：

• 可编辑输入框被替换成静态文字，自然丧失编辑能力
• 所有绑定在input元素上的悬停变色、尺寸控制、文字居中样式，因为对应的DOM节点已经被删除，完全失效
• 静态纯文本没有应用输入框的专属样式规则，自然会出现字体、排版的错位异常

批量填充的目标应该是单元格内部的输入框本身，直接给输入框的value属性赋值即可，完全不会破坏原有页面结构：

// 选中所有单元格内的input元素，而非外层td节点
document.querySelectorAll('td input').forEach((inputEl) => {
  // 直接给输入框的value赋值，和手动输入的效果完全一致
  inputEl.value = "1";
})

补充注意点 #

• 上述写法会完整保留原有DOM结构，输入框的可编辑能力、悬停效果、所有预设CSS规则都会正常生效
• 后续如果要读取表格内的所有输入值，也应该直接读取每个input的value属性，不要读取td的textContent，避免拿到和输入框实际状态不同步的静态文本
• 如果需要动态生成这类网格表格，也建议用循环动态创建input节点插入td，不要直接在td里写静态文本，否则后续的交互逻辑都无法生效

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