동적으로 생성 된 테이블에 대한 설정 기능

Question

동적으로 생성 된 콘텐츠가있는 테이블이 있습니다. 각 행에는 해당 행을 제공하기위한 버튼이 있습니다. 내 경우에는 단추의 outerHTML이 해당 행의 이름을 채택하기를 원합니다.

내 onclick 이벤트에 this을 할당하는 데 문제가 있습니다. 즉, 두 버튼 중 하나를 클릭하면 첫 번째 행의 이름 만 반복됩니다. 적절한 행 이름으로 단추를 변경하는 정확한 구문을 잘 모르겠습니다.

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

당신의 HTML을 고려은 다음과 같이이다;

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

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

지금

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

지금 클릭 이벤트에서 보는 JS 보면;

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