add button to each row using javascript and jquery

Question

Using javascript and Jquery, I am trying to add a button for each row. I want to add a click event to button of each row. Here is my code:

reportModal = UIkit.modal("#report_modal");
$('#report_modal').empty();

var gridHtml = "<table id='table1'>"
                  +"    <thead>"
                  +"      <tr>"
                  +"          <th>FirstName</th>"
                  +"          <th>Age</th>"
                  +"          <th>Tel</th>"                 
                  +"          <th>Button</th>"  
                  +"      </tr>"
                  +"      </thead>"
                  +"     <tbody></tbody>"
                  +"</table>";

$('#report_modal').html(gridHtml);                

var data = {};
       data.d = [{FirstName: 'AAA', Age: '20', Tel: '111'}, 
                {FirstName: 'BBB', Age: '98', Tel: '222'},
                {FirstName: 'CCC', Age: '45', Tel: '333'}];     
var trHTML = '';

for(var i = 0; i < data.d.length; i++){

  trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(${data.d[i].FirstName})" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';
}               

$('#report_modal').append(trHTML);

function showMsg(msg){
  alert(msg);
}

My problem is that when click in buttons the showMsg function is called but it show "undefined";

Please any idea to solve it. Thanks.

you've gotta use "Template literals" `` in order to use string interpolation or classic sctring concatenation <a onclick="showMsg(' + data.d[i].FirstName + '" — Rudolf Manusachi
– Rudolf Manusachi, Commented Jun 27, 2018 at 22:51

mscdeveloper · Accepted Answer · 2018-06-27 22:52:48Z

1

This is syntax error: use onclick="showMsg(\''+data.d[i].FirstName+'\')"

Like this:

   trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(\''+data.d[i].FirstName+'\')" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';

answered Jun 27, 2018 at 22:52

mscdeveloper

2,9291 gold badge13 silver badges19 bronze badges

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

1 Comment

user3383728 Over a year ago

Thanks so much! That's exactly what I wanted.

Rudolf Manusachi · Accepted Answer · 2018-06-27 23:11:18Z

1

you need to use "Template literals" `` in order to use string interpolation. Moreover in thiat case you can use multiline string!

trHTML += `<tr>
  <td>${data.d[i].FirstName}</td>
  <td>${data.d[i].Age}</td>
  <td>
    <a onclick="showMsg(${data.d[i].FirstName})" href="#">
      <i class="flaticon-icon-path"></i>
    </a>
  </td>
</tr>`;

or use classic string concatenation

trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(' + data.d[i].FirstName + '" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';

edited Jun 27, 2018 at 23:11

answered Jun 27, 2018 at 22:56

Rudolf Manusachi

2,3562 gold badges20 silver badges25 bronze badges

1 Comment

Dio Phung Over a year ago

FYI jQuery supports this more readable syntax : row = $("<tr/">) , or td = $("<td/>") . And you can use append() (api.jquery.com/append) to dynamically add element to it.

Collectives™ on Stack Overflow

add button to each row using javascript and jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related