html - 如何设置每个 tr 组第一行的样式？

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;
}

我如何才能只在每组中的第一行(或中间行，如果可能)设置样式，以便为子行设置图标？

提前致谢!

更新:数据表初始化，演示基本结构..

$(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 选择每个 .group< 之后的第一个 .shown 兄弟.