来自HTML表格单元格的Javascript函数调用

Question

我已经创建了一个动态HTML表格。我们可以为该表格添加和删除行。 我试图调用一个从细胞中的JavaScript函数，但这一呼吁是不是我happening.How可以从我的addrow方法调用方法如下

function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell0 = row.insertCell(0); 
      var element0 = document.createElement("input"); 
      element0.type = "checkbox"; 
      element0.name="chkbox[]"; 
      cell0.appendChild(element0); 

      var cell1 = row.insertCell(1); 
      cell1.innerHTML = rowCount + 1; 

      var cell2 = row.insertCell(2); 
      var element2 = document.createElement("input"); 
      element2.type = "text"; 
      element2.name = "txtbox[]"; 
      element2.onchange = "myChangeFunction(this)"; // calling Javascript function 
      cell2.appendChild(element2); 

} 

期待的建议给予

addRow（）函数的代码

Answer 1

为了实现这一目标使用addEventListener()方法连接的情况下，像这样：

element2.addEventListener('change', myChangeFunction); 

然后在您的myChangeFunction(),this关键字将引用引发该事件的元素。试试这个：

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 

 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 

 
    var cell0 = row.insertCell(0); 
 
    var element0 = document.createElement("input"); 
 
    element0.type = "checkbox"; 
 
    element0.name = "chkbox[]"; 
 
    cell0.appendChild(element0); 
 

 
    var cell1 = row.insertCell(1); 
 
    cell1.innerHTML = rowCount + 1; 
 

 
    var cell2 = row.insertCell(2); 
 
    var element2 = document.createElement("input"); 
 
    element2.type = "text"; 
 
    element2.name = "txtbox[]"; 
 
    element2.addEventListener('change', myChangeFunction); 
 
    cell2.appendChild(element2); 
 
} 
 

 
function myChangeFunction() { 
 
    console.dir(this); 
 
} 
 

 
addRow('foo');

<table id="foo"></table>

还要注意的是，因为你已经标记与jQuery的问题，你可以大量简化这个代码：

function addRow(tableID) { 
 
    var $table = $('#' + tableID); 
 
    var $tr = $('<tr><td><input type="checkbox" name="chkbox[]" /></td><td>' + ($table.find('tr').length + 1) + ' <input type="text" name="txtbox[]" class="txtbox" /></tr>').appendTo($table); 
 
} 
 

 
$('table').on('change', '.txtbox', function() { 
 
    console.dir(this); 
 
}); 
 

 
addRow('foo');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="foo"></table>