展开 Bootstrap 数据表行并显示子表？

Question

我想在点击图标后展开我的引导数据表。我可以使其可扩展并在那里显示另一个表，但我的按钮同时扩展表中的每一行。我不知道如何准确发送我点击到我的函数的这个 td。

看起来是这样的：

展开前：example

单击任何“+”按钮后，它会展开每一​​行：example

为子表扩展和格式化数据的函数：

function expandRow(list, td) {
    var tbl = $('#common_table').DataTable();
    var tr = $('.details-control').closest('tr');
    var row = tbl.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(list)).show();
        tr.addClass('shown');
    }
}

function format(operations) {
    var table = "<table id='common_table' class='table table-bordered'>";   
    table+="<thead><tr class='table_nav tableHeads'><th class='tableHead'>OPERACJE</th><tr></thead>";
        // for(i=0; i<operations.length; i++){
             table +="<tbody><tr class='row_style'><td>sadasdasddsa</td></tr></tbody>";
             //   }

     table+="</table>";
    return table;
}

以及我如何调用这个函数：

<table>...
<tbody>
    <tr class="row_style" th:each="qcOrder : ${qcOrdersList}">
        <td class="details-control" th:onclick="'javascript:expandRow(\''+ ${qcOperationsList} +'\', \'' + this + '\');'"></td>
...

Answer 1

试试这个：

<tr> <td id="XXXX" colspan=10 style='display:none'>
         <!-- SUB TABLE HERE --> 
     </td>
</tr>

在 JS 调用上做简单：

findElementById("XXXX") 并将元素的样式从“无”更改为“”