使用innerHTML添加表格行时onfocus、onblur、onkeypress事件失效

你遇到的动态添加输入框事件失效问题，主要源于两个关键的语法错误：字符串拼接时的引号嵌套冲突，以及数字验证函数的语法疏漏，这两个问题直接导致浏览器无法正确解析事件绑定逻辑。

1. 引号嵌套的语法冲突 #

你通过innerHTML拼接HTML字符串时，事件处理函数内的判断逻辑（比如this.value=="0.0"）使用了双引号，但整个innerHTML的外层字符串也是用双引号包裹的——这会让浏览器解析时出现语法中断，直接忽略掉后续的事件绑定代码。

解决方式很简单：把事件逻辑里的双引号换成单引号，或者对双引号进行转义（用\"），避免嵌套冲突。

2. 数字验证函数的语法错误 #

你的isNumberKey函数里有两个明显的小错误：

• if语句的括号没有闭合，少了一个结尾的)
• 错误地写了alerts，JavaScript里的弹窗函数是alert

修正后的完整代码 #

先确保counter变量已定义 #

// 在全局或合适的作用域初始化counter，避免id重复
let counter = 1;

修正后的Addrow函数 #

function Addrow(){ 
  var table = document.getElementById("myTable"); 
  var row = table.insertRow(3); 
  var cell1 = row.insertCell(0); 
  var cell2 = row.insertCell(1); 
  var cell3 = row.insertCell(2); 

  // 将事件逻辑里的双引号替换为单引号，解决嵌套冲突
  cell1.innerHTML = '<td><input type="text" class="form-control" name="cell1' + counter + '" id="cell1' + counter + '" value="0.0" ' + 
                   'onfocus="this.value = this.value==\'0.0\'?\'\':this.value;" ' +
                   'onblur="this.value = this.value==\'\'?\'0.0\':this.value;" ' +
                   'onkeypress="return isNumberKey(event)" /></td>'; 
  cell2.innerHTML = '<td><input type="text" class="form-control" name="cell2' + counter + '" id="cell2' + counter + '" value="0.0"' + 
                   'onfocus="this.value = this.value==\'0.0\'?\'\':this.value;" ' +
                   'onblur="this.value = this.value==\'\'?\'0.0\':this.value;" ' +
                   'onkeypress="return isNumberKey(event)" /></td>'; 
  cell3.innerHTML = '<td><input type="text" class="form-control" name="cell3' + counter + '" id="cell3' + counter + '" value="0.0"' + 
                   'onfocus="this.value = this.value==\'0.0\'?\'\':this.value;" ' +
                   'onblur="this.value = this.value==\'\'?\'0.0\':this.value;" ' +
                   'onkeypress="return isNumberKey(event)" /></td>'; 

  counter++; // 别忘了递增counter，保证每个输入框的id唯一
  return false; 
} 

修正后的isNumberKey函数 #

function isNumberKey(evt) { 
  var charCode = (evt.which) ? evt.which : evt.keyCode; 
  // 修复括号闭合问题，把错误的alerts改为alert
  if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) { 
    alert("Numbers or Decimal only!!!"); 
    return false; 
  } 
  return true; 
} 

额外优化建议 #

其实更推荐用动态创建元素+事件监听的方式替代字符串拼接，这样能彻底避免引号嵌套的问题，代码也更易维护。举个例子：

// 封装创建输入框的函数
function createInput(counter, cellIndex) {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'form-control';
  input.name = `cell${cellIndex}${counter}`;
  input.id = `cell${cellIndex}${counter}`;
  input.value = '0.0';

  // 绑定focus事件
  input.addEventListener('focus', function() {
    if (this.value === '0.0') this.value = '';
  });

  // 绑定blur事件
  input.addEventListener('blur', function() {
    if (this.value === '') this.value = '0.0';
  });

  // 绑定keypress事件
  input.addEventListener('keypress', isNumberKey);

  const td = document.createElement('td');
  td.appendChild(input);
  return td;
}

// 重构后的Addrow函数
function Addrow(){ 
  var table = document.getElementById("myTable"); 
  var row = table.insertRow(3); 
  row.appendChild(createInput(counter, 1));
  row.appendChild(createInput(counter, 2));
  row.appendChild(createInput(counter, 3));
  counter++;
  return false; 
}

这种方式的代码可读性更高，也不容易出现语法疏漏，后续修改逻辑也更方便。

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