使用 JQuery 在动态表中制作可点击的单元格答案

【问题标题】：Make clickable cell in dynamic table with JQuery使用 JQuery 在动态表中制作可点击的单元格
【发布时间】：2020-05-30 13:51:20
【问题描述】：

我想在 JQuery 的动态表格中的特定单元格中添加详细链接。

此代码在添加单元格/行时可以正常工作：

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

但如果我想向单元格添加动态详细的 id，则不再链接：

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);
}

这两个例子的功能完全相同：

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

在第二个示例中不起作用的部分是带有链接的 onclick。我只贴了相关代码，其余的代码在这两种情况下都是一样的。

【问题讨论】：

标签： jquery dynamic hyperlink onclick cell

【解决方案1】：

您只需要将对象组合成一个对象，而不是错误地尝试为每个属性传入一个对象。

例子：

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>

【讨论】：