Add buttons dynamically to a table element

Add buttons dynamically to a table element

I am trying to add buttons to a table dynamically. The purpose is to allow the user to get more info about the person indicated by 'name'.

How do I  get the button to be next to the name? The following is almost there but the button is on a new line due to the div.

  1. var register_tr = $('<tr></tr>');
  2. var radioid = 'radios'+id;
  3. var register_name_td = $('<td style="vertical-align: middle;" id="' + id + '" name="studentname"> ' + name + '<div align="right" data-inline="true"><button class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline"></button></div></td><td></td><td id=' + radioid + '></td>');
  4. register_name_td.appendTo(register_tr);
  5. register_tr.appendTo("#tblregisterbody");
The above produces this:


The following  (div removed) is a little better BUT I would like the button on the right hand side of the td rather than right next to the name:

  1. var register_name_td = $('<td style="vertical-align: middle;" id="' + id + '" name="studentname" <span id="' + id + '_span" > ' + name + '<button class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline"></button></span></td><td></td><td id=' + radioid + '></td>')



How can I get the icon on the same line as the name but to the right? And if I wanted more than one button, could I make a control group?

Finally, how do I best create an event handler for these buttons? I have unique id for each row item, so if add the id to the button and give all buttons the same class I thought I could use something like this:

  1.  $(".buttonclass").on("click", function() {
  2.       var str = $(this).attr('id'); // Get the id
  3. // Some code here});

Or,

  1. $(document).on('change', 'input:button', function(){
  2.       var str = $(this).attr('id'); // Get the id
  3. // Some code here});

Would either of these work?