Javascript Funktionsaufruf von HTML-Tabellenzellen

Question

Ich habe eine dynamische HTML-Tabelle erstellt. Wir können Zeilen für diese Tabelle hinzufügen und löschen. Ich habe versucht, eine Javascript-Funktion von Zellen zu nennen, aber dieser Anruf ist nicht happening.How kann ich Methode von meiner addrow Methode

addRow() Funktionscode unter

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

} 

der Suche nach Anregungen vorwärts gegeben nennen

Answer 1

Um dies zu erreichen, die Veranstaltung bringen Sie die addEventListener() Methode, wie folgt aus:

element2.addEventListener('change', myChangeFunction); 

Dann in Ihrem myChangeFunction() verweist das Schlüsselwort this auf das Element, das das Ereignis ausgelöst hat. Versuchen Sie folgendes:

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>

auch zur Kenntnis, dass, wie Sie die Frage mit jQuery mit Tags versehen haben, können Sie diesen Code massiv vereinfachen:

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>