Make clickable cell in dynamic table with JQuery

Question

I would like to add a detailed link in specific cells in a dynamic table in JQuery.

This code works fine when adding a cell/row :

$('<td class="ploegen-details-naam" onclick="link_naar_info_speler(this.parentNode.childNodes[0].textContent)">
   </td>').text(speler_naam).appendTo(details_rows);

But if I want to add dynamically detailed id's to the cell, this does not link anymore:

for (var x = 0; x < len; x ++) {
   $('<td>', {id:"naam_thuis" + x}, {class:"ploegen-details-naam"},
  {onclick:"link_naar_info_speler(this.parentNode.childNodes[0].textContent)"}).text(speler_naam).appendTo(details_rows);
}

This function is exactly the same for the 2 examples :

function link_naar_info_speler(speler_id) 
{
    location.href="/ADL/Info/Spelers/Spelers.html?" + speler_id;
}

The part that doesn't work in the second example is the onclick with the link. I only posted the relevant code, since the rest of the code is the same in the 2 cases.

score 1 · Accepted Answer · answered Feb 14 '20 at 18:41

You just need to combine your objects into a single one, rather than incorrectly trying to pass in an object per attribute.

Example:

for ( var i = 0; i < 4; i++ ) {
  $('<p>', { id: `id${i}`, class: 'my-class', onclick: 'echoMyId(this)' }).text(i).appendTo('#container');
}

function echoMyId (paragraph) {
  console.log(paragraph.id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

Make clickable cell in dynamic table with JQuery

1 Answers1