Question

我想放置一个按钮来扩展数据表中的子行，其中数据表中的每个组应该具有相同的子项....

以下css将图标放在整个表格的每一行

    td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}

如何在每个组中仅设置第一行（或中间，如果可能的话）以设置子行的图标？

提前致谢！

UPDATE：数据表初始化，给出基本结构的演示..

$(document).ready(function ()
{

    $('#myDataTable thead tr#filterrow th').each(function () {

        var title = $('#myDataTable thead th').eq($(this).index()).text();
        $(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');

    });
    $("#myDataTable thead input").on('keyup change', function () {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

    var table = $('#myDataTable').DataTable({
        //"scrollY": "200",
        "scroller": "true",
        "deferRender": "true",
        "orderCellsTop": "true",
        "columnDefs":
            [
                { "visible": false, "targets": 1 },
                {
                    "className": 'details-control', "targets": 0
                },
                 {
                     "orderable": false, "targets": 0
                 }
            ],

        "order": [[1, 'asc']],
        "displayLength": 100,
        "drawCallback": function (settings)
        {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="91">' + group + '</td></tr>'
                    );

                    last = group;
                }

            });
        }
    });
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            that
                .search(this.value)
                .draw();
        });
    });

    // Order by the grouping
    $('#myDataTable tbody').on('click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
            table.order([1, 'desc']).draw();
        }
        else {
            table.order([1, 'asc']).draw();
        }
    });

    $('#myDataTable').dataTable().makeEditable(
        {
            "aoColumns":
            [.........]
        });
    // Add event listener for opening and closing details
    $('#myDataTable tbody').on('click', 'td.details-control', function () {
        console.log(table.row(this).data());
        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(row.data())).show();
            tr.addClass('shown');
        }
    });
});

Answer 1

在不知道您的HTML的情况下，我必须猜测它是这样的：

<table>
  <tr class="group">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="group">[...]</tr>
  <tr class="shown">[...]</tr>
</table>

如果是这种情况，您可以使用相邻的同级选择器tr.group + tr.shown在每个.shown之后选择第一个.group兄弟。

Answer 2

使用伪类first-child

.table-class tr:first-child{
    // css
}

Answer 3

你好，你可以写下面的方式：

table.test-table tr:first-child{
   /* enter css code here */
}

Answer 4

tr.group + tr td.details-control {
    background: url('../Content/DataTables/images/details_open.png') no-repeat left center;
    cursor: pointer;
}
tr.group + tr.shown td.details-control{
    background: url('../Content/DataTables/images/details_close.png') no-repeat left center;
}

诀窍......我调整了Andrea Ghidini的答案

如何设置每个tr组的第一行？

4 个答案: