带有 jQuery 和 DataTable 的表格行切换（）答案

【问题标题】：Table rows toggle() with jQuery and DataTable带有 jQuery 和 DataTable 的表格行切换（）
【发布时间】：2017-03-29 14:12:37
【问题描述】：

我有一个小表格，其中有一些行，其中一些带有额外的信息，这些信息将通过 jQuery toggle() 显示或隐藏。一切正常，但我不能在这种情况下使用 DataTable。我的 jQuery 看起来像这样：



    $(document).ready(function() {
        $('#serien tbody').on('click', 'td.details-control', function () {

            if ( $(this).hasClass('showDetails') ) {
                $(this).closest('tr').removeClass('shown');
            }
            else {
                $(this).closest('tr').addClass('shown');
            }

            $(this).toggleClass('showDetails');
            $(this).parent().next().toggle();
        });
    });

但是当我想使用 DataTable 时 - 以最简单的方式，例如 https://datatables.net/examples/advanced_init/events_live.html



    $(document).ready(function() {
        var table = $('#serien').DataTable();

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

这行不通，谁能给我一个提示？

【问题讨论】：

另外，能否请您也发布相关的HTML？如果可能的话，添加一个示例小提琴或 sn-p..

标签： javascript jquery datatable

【解决方案1】：

您正在使用this 传递给row() 函数。 this 在此上下文中指向 td。您应该改为传入该 td 的父 tr 元素。

$(document).ready(function() {
    var table = $('#serien').DataTable();

    $('#serien tbody').on('click', 'td.details-control', function () {
        var data = table.row( $(this).closest("tr")[0] ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

【讨论】：

我试过了，但我会收到同样的错误 [code]TypeError: i is undefined jquery.dataTables.min.js:24:271

【解决方案2】：

表格的一部分看起来像

<pre></pre>

<table id="serien" class="table table-hover">
  <thead>
    <tr class="success">
      <th colspan="3">The Avengers</th>
    </tr>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Vorname</th>
    </tr>
  </thead>
  <tbody>  
    <tr>
      <td class="details-control"></td>
      <td>Peel</td>
      <td>Emma</td>
    </tr>
    <tr class="showDetails">
      <td colspan="3">
        <table class="table table-bordered">
          <tr>
            <th>Name</th><th>Vorname</th>
          </tr>
          <tr>  
            <td>Rigg</td><td>Diana</td>           
          </tr>
        </table>
        </td>
      </tr>
      ....
    </tbody>        
</table>

【讨论】：