jQuery function call from table row

Question

I bind data using jQuery to a HTML table. I need to pass data using a function call. Here is my code; please note that I get data from json and bind that data to table using jQuery.

 result.data.resultSet.forEach(user => {
        const $tr = $('<tr>');
        $tr.append($('<td>').text(user.username));
        $tr.append($('<td>').text(user.firstname));
        $tr.append($('<td>').text(user.lastname));
        $tr.append($('<td>').text(user.email));
        $tr.append($('<td>').text(user.usertype));
        const profileURL = "./UserUpdate?name=" + user.username + "&firstname=" + user.firstname + "&usertype=" + user.usertype;
        var ondelete = onDelete(user.id);
        const $td = $('<td>').append($('<a>').attr('href', profileURL).append($('<img>').attr('src', '/images/Common UI Assets/Icon-16.png')))
            .append($('<a>').attr('onclick', onDelete(user.id)).append($('<img>').attr('src', '/images/Common UI Assets/Icon-16 _Delete.png')));
        $tr.append($td);
        $('#usertable tbody').append($tr);
    });

Here in this section .append($('<a>').attr('onclick', onDelete(user.id)) I'm calling a function onDelete(user.id) and pass user.id. But problem is I did not click any that image or row but it is calling every time when load data. I want to get that user data which row I click.

Here is my ondelete function I console it .

function onDelete(item) {

     console.log(item);}

1. you're calling the function and setting the return value as onclick 2. use $('<a>').on('click', function () { /* actual command in here */ }); — user5734311
– user5734311, Commented Aug 15, 2019 at 9:35

Rory McCrossan · Accepted Answer · 2019-08-15 10:12:25Z

4

The issue in your logic is that you're immediately calling onDelete() and setting it's response as the click event handler.

To fix this you can instead add the user.id as a data attribute on the element and use a single delegated event handler for all of its instances. Try this:

result.data.resultSet.forEach(user => {
  const $tr = $('<tr>');
  $tr.append($('<td>').text(user.username));
  $tr.append($('<td>').text(user.firstname));
  $tr.append($('<td>').text(user.lastname));
  $tr.append($('<td>').text(user.email));
  $tr.append($('<td>').text(user.usertype));

  const profileURL = "./UserUpdate?name=" + user.username + "&firstname=" + user.firstname + "&usertype=" + user.usertype;

  const $td = $('<td>').append($('<a>').attr('href', profileURL).append($('<img>').attr('src', '/images/Common UI Assets/Icon-16.png')))
    .append($('<a class="delete" href="#" data-user-id="' + user.id + '">')).append($('<img>').attr('src', '/images/Common UI Assets/Icon-16 _Delete.png')));
  $tr.append($td);
  $('#usertable tbody').append($tr);
});

$('#usertable tbody').on('click', 'a.delete', function(e) {
  onDelete($(this).data('user-id'));
});

That being said you can make the logic far less messy and perform better by returning the HTML as a string which gets appended to the DOM once, like this:

var rows = result.data.resultSet.map(user => {
  const profileURL = `./UserUpdate?name=${user.username}&firstname={$user.firstname}&usertype=${user.usertype}`;
  return `<tr> 
    <td>${user.username}</td>
    <td>${user.firstname}</td>
    <td>${user.lastname}</td>
    <td>${user.email}</td>
    <td>${user.usertype}</td>
    <td>
      <a href="${profileURL}"><img src="/images/Common UI Assets/Icon-16.png" /></a>
      <a href="#" class="delete" data-user-id="${user.id}"><img src="/images/Common UI Assets/Icon-16 _Delete.png" /></a>
    </td>
  </tr>`;
});

$('#usertable tbody').append(rows).on('click', 'a.delete', function(e) {
  onDelete($(this).data('user-id'));
});

Note that the above uses template literals which are not available in IE. Should you need to support IE then I'd suggest having a hidden HTML template of the <tr> which you clone(), update, then add to the DOM where needed.

edited Aug 15, 2019 at 10:12

answered Aug 15, 2019 at 9:32

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

user5734311 Over a year ago

I guess var ondelete = onDelete(user.id); needs to go? And the map function has no return value.

Rory McCrossan Over a year ago

Thank you, on both counts :)

Rifat Murtuza Over a year ago

@Rory McCrossan I need to call ondelete function on that specifiq a tag inside that a delete icon not in tr can you do that . still I cannot get the id when i call the function

Rifat Murtuza Over a year ago

@Rory McCrossan it cannot be href i need onclick event

Rory McCrossan Over a year ago

Apologies, there were a couple of errors in the above code. I've edited them. Here's a fully working example: jsfiddle.net/dey09khw

Collectives™ on Stack Overflow

jQuery function call from table row

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related