html：onfocus，onblur，onkeypress在为表创建行时使用innerhtml时不起作用

Question

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

  

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;
    }

Answer 1

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

＆＃13;

＆＃13;

var formControlList = document.querySelectorAll('.form-control');
for (var i = 0; i < formControlList.length; i++) 
{
    formControlList[i].addEventListener('blur', function(event) 
    {
       
    });
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参阅下面的代码：（这不是一个错误，但在第一个小写字母调用的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>

Answer 3

而不是onblur / onfocus / onkeypress，我只使用placeholder="0.0"和type="number"

＆＃13;

＆＃13;

function addRow() {
  const table = document.getElementById('myTable')
  const row = table.insertRow()
  for (let i = 0; i < 3; i++) {
    const cell = row.insertCell(i)
    const input = document.createElement('input')
    input.type = 'number' // only accept numeric input
    input.placeholder = '0.0' // placeholder disappears when a value is entered
    input.className = 'form-control'
    input.name = `cell${i+1}${row.rowIndex+1}`
    cell.appendChild(input)
  }
}

＆＃13;

<p><button onclick="addRow()" type="button">Add a row</button></p>

<table id="myTable">
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

出现此问题是因为您在quotes中使用了quotes。要在由"个字符分隔的HTML属性中表示"字符，请使用实体"。

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

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

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

	cell1.innerHTML = '<td><input type="text" class="form-control" name="cell1' + counter + '" id="cell1' + counter + '" value="0.0" ' + ' onfocus="this.value = this.value==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;: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==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;: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==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;:this.value;" onkeypress="return isNumberKey( event )" /></td>';

	return false
}

function isNumberKey ( evt ) {
	var charCode = ( evt.which ) ? evt.which : evt.keyCode;

	if ( charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57 ) ) {
		alert( 'Numbers or Decimal only!!!' );
		return false;
	}

	return true;
}

<button onclick="Addrow()" type="button">Add a row</button>

<table id="myTable">
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>