时间戳

首页 > 解决方案 > html：在为表格创建行时使用 innerhtml 时，Onfocus、onblur、onkeypress 不起作用

javascript - html：在为表格创建行时使用 innerhtml 时，Onfocus、onblur、onkeypress 不起作用

问题描述

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

Onfocus，onblur，onkeypress

不处理新创建行的输入。以下是我在表格中添加一行的 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;
}

检查输入是否为数字的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;
    }

标签： javascript

解决方案

请参见下面的代码：（这不是错误，而是在 js 中function以第一个小写字母调用）

    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);
    var counter=0;
        cell1.innerHTML = '<input type="text" class="form-control" name="cell1' + counter + '" id="cell1' + counter + '" value="0.0" '+
                        'onfocus="focusData(this)" onblur="blurData(this)" onkeypress=" isNumberKey(event)" />';
        cell2.innerHTML = '<input type="text" class="form-control" name="cell2' + counter + '" id="cell2' + counter + '" value="0.0"' +
                              ' onfocus="focusData(this)" onblur="blurData(this)" onkeypress="isNumberKey(event)" />';
        cell3.innerHTML = ' <input type="text" class="form-control" name="cell3' + counter + '" id="cell3' + counter + '" value="0.0"' +
                              ' onfocus="focusData(this)" onblur="blurData(this)"  onkeypress="isNumberKey(event)" />';
       
    }
    function blurData(el) {
        el.value = el.value == '' ? "0.0" : el.value;
    }
    function focusData(el) {
        el.value = el.value == '0.0' ? '' : el.value;
    }
    <table id="myTable">
      <tr>
        <td>Row1 cell1</td>
        <td>Row1 cell2</td>
      </tr>
      <tr>
        <td>Row2 cell1</td>
        <td>Row2 cell2</td>
      </tr>
      <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
      </tr>
    </table>
    <button onclick="addRow()">Try it</button>

推荐阅读