Einstellungsfunktionen für dynamisch generierte Tabelle

Question

Ich habe eine Tabelle mit dynamisch generiertem Inhalt. Jede Zeile enthält einen Button, der dieser Reihe dienen soll. In meinem Fall möchte ich, dass der OuterHTML meiner Schaltfläche den Namen des Namens in seiner Zeile übernimmt.

Ich habe Probleme bei der Zuweisung this zu meinem onclick-Ereignis. Wenn Sie auf eine der Schaltflächen klicken, wird nur der Name in der ersten Zeile wiederholt. Ich bin mir nicht sicher über die genaue richtige Syntax, damit die Schaltfläche in den entsprechenden Zeilennamen geändert wird.

var erray = ["Todd", "Bill", "Sam"]; 
 
var pname = document.querySelectorAll('.pname'); 
 
var adoptname = document.querySelectorAll('.adoptname'); 
 

 
for (var i = 0; i < erray.length; i++){ 
 
    var adoptname = document.querySelectorAll('.adoptname'); 
 
    pname[i].innerText = erray[i]; 
 

 
    adoptname[i].onclick = adoption; 
 

 
    function adoption(){ 
 
     for (var i = 0; i < pname.length; i++) 
 
      this.outerHTML = pname[i].innerHTML; 
 
    } 
 
}

table { border: 1px solid black; }

<table> 
 
<thead><tr> 
 
<th>Name</th> 
 
<th>Adopt</th> 
 
    </tr></thead> 
 
    <tbody> 
 
    <tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr> 
 
    <tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>  
 
    </tbody> 
 
</table>

Answer 1

<table> 
<thead><tr> 
<th>Name</th> 
<th>Adopt</th> 
</tr></thead> 
<tbody id="table_body"> 
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr> 
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>  
</tbody> 
</table> 

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 

<script> 
window.onload=function() 
{ 
    var array=["Todd","Bill","Sam"]; 

    for(var i=0;i<array.length;i++) 
    { 
    $("#table_body tr:nth-child("+(i+1)+") .pname").html(array[i]); 
    $("#table_body tr:nth-child("+(i+1)+") .adoptname").attr("id","adopt-"+array[i]); 
    } 


    $("#table_body").on("click","[id^=adopt]",function(){ 
     var id=$(this).attr("id"); 
     var name=id.split("-")[1]; 
     alert(name); 
    }); 
    } 

</script> 

Answer 2

Betrachten Sie Ihre html wie dieser ist;

<table> 
    <thead> 
     <th>Name</th> 
     <th>Adopt</th> 
    </thead> 

    <tbody id="table_body"> 
    </tbody> 
</table> 

Nun ein Blick auf die js

var array=["Todd","Bill","Sam"]; 
var html=""; 

for(var i=0;i<array.length;i++) 
{ 
    html=html+"<tr><td>"+array[i]+"</td><td><button id=\"adopt-"+array[i]+"\">Adopt</button>"; 
} 

$("#table_body").html(html); 

nun auf dem Click-Ereignis aussehen;

$("#table_body").on("click","[id^=adopt]",function(){ 
      var id=$(this).attr("id"); 
      var name=id.split("-")[1]; 
      alert(name); 
})