为数据表中的单个行添加点击事件（JQuery）[重复]答案

【问题标题】：Adding on click events for individual rows in a data table( JQuery) [duplicate]为数据表中的单个行添加点击事件（JQuery）[重复]
【发布时间】：2019-02-28 16:07:54
【问题描述】：

我是 javascript 新手，我想创建一个使用数据表。数据表是动态呈现的。我有一组作为 dataSet 传递的数据。

但问题是我想为每一行添加一个函数 "showDetails(id)" （这里 id 是指行 id）。我坚持这个

$(document).ready(function() {
    $('#example').DataTable( {
    data: dataSet,
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
          { title: "Salary" }]
   } );
} );

【问题讨论】：

好的，显示您尝试过的代码在哪里？
@CodeThing 首先你认为上面的代码是什么？第二点是我停留在添加 onclick 事件的位置，因为我传递了原始数据

标签： javascript jquery datatables

【解决方案1】：

我建议不要将 showDetails(id) 添加到每一行，而是将其添加到父组件。这样，只有一个单击侦听器会被附加（从性能角度来看很好）。在您的案例中将 onclick 添加到 #example 元素。

这是如何工作的，当任何子元素（行）被点击时，事件将冒泡并到达父组件，您可以在其中利用 event.target.id 来获取点击了哪一行并执行适当的功能。

正如在其他帖子官方文档中所写的那样，它还建议遵循将事件侦听器添加到 tbody 而不是每一行的方式。

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );

【讨论】：

【解决方案2】：

创建数据表后，您可以简单地将事件附加到它。

$(document).ready(function() {
     $('#example').DataTable( {
       data: dataSet,
       columns: [
                 { title: "Name" },
                 { title: "Position" },
                 { title: "Office" },
                 { title: "Extn." },
                 { title: "Start date" },
                 { title: "Salary" }]
            });

    $('#example tbody').on('click', 'tr', function () {
      var data = table.row( this ).data();
      alert( 'You clicked on '+data[0]+'\'s row' );
    });
});

更多参考，您可以访问官方网站example。

【讨论】：

【解决方案3】：

您好，以下代码将帮助您在 jQuery 数据表中获取行点击事件，您可以在其中实现 showDetails(id); 功能。

var table = $('#example').DataTable();
          $(document).on("click", "#example tr", function(e) {
                var data = table.row( this ).data();
                alert( 'You clicked on '+data[0]+'\'s row' );
          });

你可以看看我创建的工作小提琴fiddle

【讨论】：

【解决方案4】：

无论数据表如何渲染，它仍然是一个动态添加到 DOM 中的标记。

因此，如下所示的委托事件侦听器将起作用。

$("table").on('click', 'tr', function() {
    // Get the id somehow
    let id = 1;
    showDetails(id);
});

【讨论】：