Hinzufügen onclick Ereignis zu Tabelle jeder Zeile

Ich habe eine HTML-Tabelle dynamisch von js generiert, und ich möchte jede Zeile ein Ereignis onClick hinzufügen.
Gefallen Sie diesen
(wegen der Notwendigkeit, komplexe Parameter in meinem ursprünglichen Code zu übergeben, verwende ich Javascript Onclick-Funktion hinzugefügt werden):Hinzufügen onclick Ereignis zu Tabelle jeder Zeile

<!DOCTYPE html> 
<html> 
<body> 
<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
    <thead> 
     <th>Text</th> 
     <th>MoreText</th> 
     <th>Lorem</th> 
     <th>Ipsum</th> 
    </thead> 
</table> 
<br /> 


<script type="text/javascript"> 
    for (var i = 0; i < 4; i++) { 
     document.getElementById("tableID").innerHTML += '<tr><td>Text</td><td>MoreText</td><td>Lorem</td><td>Ipsum</td></tr>'; 

     document.getElementById("tableID").rows[i+1].onclick = function() { 
      alert("Hello World"); 
      //alert(i); 
     }; 
    } 
</script> 
</body> 
</html>

Wenn die Tabellenzeile festgelegt ist und in HTML-Dokument erklärt, mit dieser Methode funktioniert,
aber in meinem Code (dynamisch generierte Tabellenzeile) funktioniert die onClick-Funktion nur in der letzten Zeile.

Ich denke, dass vielleicht asynchrones Problem ist, aber ich kann nicht herausfinden.

UPDATE
Nach @ Quentin Methode, herausgegeben ich meinen Code. Es funktioniert gut.

<!DOCTYPE html> 
<html> 
<body> 
<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
    <thead> 
     <th>Text</th> 
     <th>MoreText</th> 
     <th>Lorem</th> 
     <th>Ipsum</th> 
    </thead> 
</table> 
<br /> 

<script type="text/javascript"> 
    for (var i = 0; i < 4; i++) { 
     var table = document.getElementById('tableID'); 

     var tr = document.createElement('tr'); 
     tr.onclick = function() { 
      alert("Hello World"); 
     }; 

     var td1 = document.createElement('td'); 
     td1.innerText = "Text"; 
     var td2 = document.createElement('td'); 
     td2.innerText = "MoreText"; 
     var td3 = document.createElement('td'); 
     td3.innerText = "Lorem"; 
     var td4 = document.createElement('td'); 
     td4.innerText = "Ipsum"; 

     tr.appendChild(td1); 
     tr.appendChild(td2); 
     tr.appendChild(td3); 
     tr.appendChild(td4); 

     table.appendChild(tr); 
    } 
</script> 
</body> 
</html>

Quelle

2016-09-29 CryMasK

Sie weisen innerHTML einen neuen Wert zu.

Dadurch werden alle vorhandenen DOM-Elemente und die ihnen zugeordneten Ereignisbehandlungsroutinen gelöscht und neue erstellt (Sie haben jedoch keinen Code, um die Ereignisbehandlungsroutinen neu zu erstellen, die Sie löschen).

Verwenden Sie nicht innerHTML. Verwenden Sie Standard-DOM-Methoden: createElement, appendChild, usw. Dann können Sie Ihre neue Zeile zum Tabellenkörper hinzufügen, ohne zu ändern, was bereits vorhanden ist.

Quelle

2016-09-29 18:13:49 Quentin

Vielen Dank für erklären, wie Sie den Code zu arbeiten. Ich habe meinen Code geändert und es funktioniert einwandfrei. – CryMasK

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    table td { cursor: pointer; border: 1px solid black; } 
    #out { color: red; } 
</style> 
</head> 
<body> 
<table id="tableID"> 
    <thead> 
     <th>Text</th> 
     <th>MoreText</th> 
     <th>Lorem</th> 
     <th>Ipsum</th> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
<div id="out"></div> 

<script type="text/javascript"> 
    function createCell(i, row, text) { 
    var td = document.createElement('td'); 
    var content = document.createTextNode(text + i); 
    td.appendChild(content); 
    td.addEventListener('click', function() { document.getElementById('out').innerHTML = 'You clicked ' + this.innerHTML; }, false); 
    row.appendChild(td); 
    } 

    for (var i = 0; i < 4; i++) { 
    var tr = document.createElement('tr'); 
    createCell(i, tr, 'a'); 
    createCell(i, tr, 'b'); 
    createCell(i, tr, 'c'); 
    createCell(i, tr, 'd'); 

    document.querySelectorAll('#tableID tbody')[0].appendChild(tr); 
    } 
</script> 
</body> 
</html>

Dies sollte wahrscheinlich funktionieren, sehen Demo: http://jsbin.com/lucequgotu

Quelle

2016-09-29 18:34:44

Dank Ihres Codes funktioniert es auch perfekt. – CryMasK

Hinzufügen onclick Ereignis zu Tabelle jeder Zeile

Antwort

Verwandte Themen