Javascript html:Onfocus、onblur、onkeypress在为表创建行时使用innerhtml时不起作用

我试图向表中添加一行，每个单元格都有一个文本类型的输入。但是

对焦、模糊、按键

不处理新创建行的输入。以下是向表中添加行的javascript代码：

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>';
    return false;
}

函数Addrow（）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（3）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=
'';
cell2.innerHTML=
' ';
cell3.innerHTML=''；
返回false；
}

Javascript函数检查输入是否为数字

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57) {
        alerts("Numbers or Decimal only!!!");
        return false;
    }
        return true;
    }

函数isNumberKey（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（charCode！=46&&charCode>31&&charCode<48|charCode>57）{
警报（“仅限数字或十进制！！！”；
返回false；
}
返回true；
}

您应该使用addEventListener事件委派来动态创建HTML

var-formControlList=document.querySelectorAll（'.form-control'）；
对于（var i=0；i}

参见下面的代码：（这不是一个bug，而是在js

函数中用第一个小写字母调用的）


函数addRow（）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（3）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var计数器=0；
cell1.innerHTML=''；
cell2.innerHTML=''；
cell3.innerHTML=''；
}
函数数据（el）{
el.value=el.value=''？“0.0”：el.value；
}
函数focusData（el）{
el.value=el.value=='0.0'？''：el.value；
}

第1行第1单元
第1行第2单元
第2行第1单元
第2行第2单元
第3行第1单元
第3行第2单元
试试看，我只需要使用占位符=“0.0”
和
type=“number”


函数addRow（）{
const table=document.getElementById（'myTable'）
const row=table.insertRow（）
for（设i=0；i<3；i++）{
常量单元格=行插入单元格（i）
常量输入=document.createElement（'input'）
input.type='number'//仅接受数字输入
input.placeholder='0.0'//输入值时占位符消失
input.className='表单控件'
input.name=`cell${i+1}${row.rowIndex+1}`
cell.appendChild（输入）
}
}
添加一行

出现问题的原因是您在
引号中使用了
引号
。要在由
“
字符分隔的HTML属性中表示
”
字符，请使用实体
“

我建议使用JavaScript附加事件监听器，而不是使用内在的事件属性。它大大简化了事情

但是请注意，浏览器不会执行使用
innerHTML
添加到文档中的JavaScript。如果要以编程方式添加脚本，请使用
createElement
或
appendChild
或


函数Addrow（）{
var table=document.getElementById（'myTable'），
行=表。插入行（3），
单元1=行插入单元（0），
单元2=行插入单元（1），
单元3=行插入单元（2），
计数器=1；
cell1.innerHTML=''；
cell2.innerHTML=''；
cell3.innerHTML=''；
返回错误
}
函数isNumberKey（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（charCode！=46&&charCode>31&&charCode<48|charCode>57））{
警报（'仅限数字或十进制！！！'）；
返回false；
}
返回true；
}
添加一行
您的
单元格*
变量已经是
元素。您不需要将
..
添加到它们的内容中您有未替换的引号字符。例如
onfocus=“this.value=“
isNumberKey
有什么作用？@Phil我的控制台没有显示错误，但我可以知道我应该为
onfocus=”做什么更改吗this.value=“
isNumberKey（）是一个javascript函数，用于检查输入是否为数字。我不会说您需要输入事件名称为“blur”，而不是“onblur”“而且它不会出现在
文档中，因此不会出现这种情况work@Phil谢谢你的反馈。我已经更新了我的代码和文本。你必须在每次删除一行时重新运行此代码added@MohammadAliRony感谢您的回复，但不起作用感谢您回复blur（）和focus（）我对你的代码做了一些更改，现在它完全按照我想要的方式工作。再次感谢你。请允许我编辑你的代码。谢谢你的帮助，但这不是我想要的方式。