javascript - 动态生成表的设置函数

Question

我有一个包含动态生成内容的表格。每行都有一个按钮，用于为该行提供服务。在我的例子中，我希望我的按钮的 outerHTML 在其行中采用名称的名称。

我无法将 this 分配给我的 onclick 事件。按原样，单击任一按钮只会重复第一行中的名称。我不确定让按钮更改为适当的行名称的确切语法。

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

考虑你的html是这样的；

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

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

现在看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);

现在来看点击事件；

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