在行内显示更多详细信息

Question

单击十字按钮时，如何在每行内的每一行内显示信息行？

当我单击按钮时，只有颜色发生变化，而不显示详细信息区域

这是我的代码：

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>
            </th>
            <th>
                # Act
            </th>
            <th>
                Name
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control">
            </td>
            <td>
                test 1
            </td>
            <td>
                test 2
            </td>
        </tr>
    </tbody>
</table>

即使添加JavaScript代码，HTML代码也可以正常工作：

function format(value) {
    // alert("extra");
    return '<div>Hidden Value: ' + value + '</div>';
}
$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [{
            className: "details-control",
            "targets": [0]
        }]
    });
    // // Add event listener for opening and closing details
    $('tbody').on('click', 'td.details-control', function() {
        var tr = $(this).closest('tr'),
            row = table.row(tr);
        if (row.child.isShown()) {
            tr.next('tr').removeClass('details-row');
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child(format(row.data())).show();
            tr.next('tr').addClass('details-row');
            tr.addClass('shown');
        }
    });
});

Datatable 1
Datatable 2