Javascript 设置动态生成表的函数

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

我无法将此

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


var erray=[“托德”、“比尔”、“萨姆”]；
var pname=document.querySelectorAll（'.pname'）；
var-adoptname=document.querySelectorAll（'.adoptname'）；
对于（变量i=0；i

表格{边框：1px纯黑色；}

名称
采用
采用
采用
考虑一下你的html是这样的

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

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


名称
采用
采用
采用
window.onload=function（）
{
变量数组=[“托德”、“比尔”、“萨姆”]；
对于（var i=0；i您在
表体
上有一个输入错误。我认为应该是
表体
。此外，我也不确定
表事件
id指的是什么。关于我的问题，我实际上不需要生成整个表行。我有一个视图引擎为我做这件事。我所需要的是将函数触发器设置为其指定值。）ted行。如果您不想生成整行，那么您可以按照我的第二个答案进行操作。您能澄清一下
#table_event
分配到哪里吗？我尝试将按钮修改为
采用“
，然后将单击调用从id切换到类
$（“.table event”）
。但是，它没有做任何事情。很抱歉，编辑后我又犯了错误。现在进行了更改；它应该可以工作。table\u事件将是table\u正文。请更改它，否则请与我的代码保持一致。复制代码似乎会导致，但仍然无法工作。现在我已检查并添加了完整的工作代码。请立即检查。
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);
 })

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