setting functions for dynamically generated table

Question

I have a table with dynamically generated content. Each row comes with a button that is meant to serve that row. In my case I want my button's outerHTML to adopt the name of the name on its row.

I am having trouble assigning this to my onclick event. As is, clicking either button will only repeat the name on the first row. I am unsure of the exact proper syntax for getting the button to change to its appropriate row name.

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>

KOUSIK MANDAL · Accepted Answer · 2016-09-08 18:20:21Z

2

Consider your html is like this;

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

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

Now look at the 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);

Now look at the click event;

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

edited Sep 8, 2016 at 18:20

answered Sep 8, 2016 at 16:17

KOUSIK MANDAL

2,0421 gold badge24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abrahamlinkedin Over a year ago

You have a typo on table-body. I believe it should be table_body. In addition, I am also unsure what table-event id refers to. Regarding my question, I don't actually need to generate the entire table row. I have a view engine do that for me. All I need is to make the function trigger to its designated row.

KOUSIK MANDAL Over a year ago

If you don't want to generate a full row then you can follow my 2nd answer.

abrahamlinkedin Over a year ago

Can you clarify where #table_event is assigned? I tried modifying the button to <button class=\"table-event\" id=\"adopt-"+array[i]+"\">Adopt</button>" and then switched the click call from an id to the class $(".table-event"). However, it did not do anything.

KOUSIK MANDAL Over a year ago

Sorry I did mistake again after edit. Now made the change; it should work. table_event 'll be table_body. Change it else every think keep same as my code.

KOUSIK MANDAL · Accepted Answer · 2016-09-08 18:35:40Z

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>

edited Sep 8, 2016 at 18:35

answered Sep 8, 2016 at 17:48

KOUSIK MANDAL

2,0421 gold badge24 silver badges51 bronze badges

2 Comments

abrahamlinkedin Over a year ago

Copying your code appears to lead to this, which still does not function.

KOUSIK MANDAL Over a year ago

Now I have checked and added the full working code. Check it now.

Collectives™ on Stack Overflow

setting functions for dynamically generated table

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related