Question

我想在点击图标后展开我的bootstrap数据表。我可以使它可扩展并在那里显示另一个表，但我的按钮同时扩展了表中的每一行。我不知道如何发送这个我点击我的功能的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”）并将元素的样式从“none”更改为“”

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

1 个答案: