javascript - 如何将钻取表扩展到数据表中的第三级？

Question

我参考了以下代码并成功获得了数据表中的两个级别的钻取表。

https://jsfiddle.net/karlnicholas/2gc3r7vv/

现在我想获得第 3 级的向下钻取表，所以我尝试通过向子行添加详细信息控制按钮来扩展代码。请查看以下代码

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>   
<title>Datatable drilldown Example</title>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"> </script>

<style>

td.details-control {
    background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
}

td.details-control1 {
    background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control1 {
    background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
}

</style>

<script>

var opinions = [{"id":47,"name":"E061140","fileName":null,"disposition":null,"summary":null,"title":"Marr. of Eustice","opinionDate":"2015-12-10"},{"id":48,"name":"C070296M","fileName":null,"disposition":null,"summary":null,"title":"P. v. Nilsson","opinionDate":"2015-12-10"},{"id":50,"name":"S209643","fileName":null,"disposition":null,"summary":null,"title":"P. v. Stevens","opinionDate":"2015-12-10"}];
var sections = [{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"177.5"},"refCount":2,"section":{"part":"Chapter","partNumber":"4","title":"Incidental Powers and Duties of Judicial Officers","codeRange":{"sNumber":{"position":168,"sectionNumber":"177"},"eNumber":{"position":171,"sectionNumber":"179"}},"depth":3}},{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"580"},"refCount":16,"section":{"part":"Chapter","partNumber":"1","title":"Judgment in General","codeRange":{"sNumber":{"position":862,"sectionNumber":"577"},"eNumber":{"position":879,"sectionNumber":"582.5"}},"depth":3}}];

function format ( table_id ) {
    return '<table class="table table-striped" id="opiniondt_'+table_id+'">'+
    '<thead><tr><th></th><th>References</th><th>Section</th><th>Statute Titles</th></tr></thead>'+
    '<tr>'+
    '<td id="table2"></td>'+
      '<td>Full name:</td>'+
      '<td>Extension number:</td>'+
      '<td>Extra info:</td>'+
    '</tr>'+
    '<tr>'+
    '<td id="table2"></td>'+
      '<td>Full name:</td>'+
      '<td>Extension number:</td>'+
      '<td>Extra info:</td>'+
    '</tr>'+
    '</table>';
  }
var iTableCounter=1;
var oInnerTable;

$(document).ready(function() {
    TableHtml = $('#opiniondt').html();

    var table = $('#opiniondt').DataTable( {
      paging:    false,
      searching: false, 
      info:      false, 
      rowId: 'id', 
      data: opinions, 
      columns:[ 
        {   className:      'details-control',
            orderable:      false,
            data:           null,
            defaultContent: '' },
        { data:'opinionDate'},
        { data:'title'}, 
        { data:'name'}
      ],
      order: [[1, 'asc']]
    } );
    /* Add event listener for opening and closing details
     * Note that the indicator for showing which row is open is not controlled by DataTables,
     * rather it is done here
     */
     $('#opiniondt tbody').on('click', 'td.details-control', function () {
         var tr = $(this).closest('tr');
         var row = table.row( tr );   

         if ( row.child.isShown() ) {
             //  This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
         }
         else {
            // Open this row
            row.child( format(iTableCounter) ).show();
            tr.addClass('shown');
            // try datatable stuff
            oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({
                data: sections, 
                autoWidth: true, 
                deferRender: true, 
                info: false, 
                lengthChange: false, 
                ordering: false, 
                paging: false, 
                scrollX: false, 
                scrollY: false, 
                searching: false, 
                columns:[ 
                {   className:'details-control1',

                    orderable:      false,
                    data:           null,
                    defaultContent: '' },
                   { data:'refCount' },
                   { data:'section.codeRange.sNumber.sectionNumber' }, 
                   { data:'section.title' }
                 ]
            });
            iTableCounter = iTableCounter + 1;
        }
     });

    $('.2nddrill').click(function(){
        console.log("class");
    });

    $('. details-control1').click(function(){
        console.log("details-control1");
    });

    $('.even').click(function(){

    console.log("even");
    });

    $('.odd').click(function(){

    console.log("odd");
    })

    });


</script>

<table class="table table-striped table-bordered" id="opiniondt">
<thead><tr><th></th><th>Date</th><th>Title</th><th>Document</th></tr></thead>

我在获取子行点击的 onclick 事件时遇到问题。我认为由于 details_control1 具有相同的类名，我可以将它用于 onclick，但它不起作用。帮我解决这个问题，提前谢谢你。